js实现图片旋转效果

最新推荐文章于 2024-03-29 22:17:51 发布

不染心

最新推荐文章于 2024-03-29 22:17:51 发布

阅读量1.7k

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_38234785/article/details/77070875

版权

jQuery 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一、问题描述

在做一个音乐播放的页面时候，想模仿网易云的一个，碟片播放的效果，需要的是图片转动。

二、解决问题

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>   
    <style type="text/css">
        *{
        	margin: 0 auto;
            padding: 0;
        }
        #music-contain{
        	height: 700px;
        	width: 100%;
        	overflow: inherit;
        }
    	#music-tittle{
    		height: 150px;
    		padding: 20px;
    	}
    	#music-tittle img{
    		background-color: black;
    		height: 90px;
    		width: 90px;
    		border-radius: 60%;
    	}
    	#download-APP{
    		margin-top: 40px;
    		width:100%;
    		height: 40px;
    		opacity: 0.8;
    	}
    	#music-foot{
    		text-align: center;
    		margin-bottom: 40px;
    	}
    	.blur {	
		    filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */
		    background-position: center;
		    background-size: cover;		    
		    width: 130%;
		    -webkit-filter: blur(10px); /* Chrome, Opera */
		       -moz-filter: blur(10px);
		        -ms-filter: blur(10px);    
		            filter: blur(10px);
		    
		    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */
		}
		#disc{
			background-image: url(img/bg4.png);
			background-size: 100% 100%;
			/*height: 300px;
			width: 300px;*/
			margin-bottom: 40px;
		}
		#disc img{
			height: 55%;
			width: 55%;
			border-radius: 60%;
			margin-top: 22.5%;
		}
   </style>
   <script type="text/javascript">
   	$(function(){
   		//设置disc的样式
   		function setdisc(){
   		var hei=$(window).width();
            	$("#disc").css({
            		'height': hei*0.8,
            		'width':  hei*0.8
            	});
            	
        } 
        setdisc();
         if(location.href.indexOf('#reloaded')==-1){
		    location.href=location.href+"#reloaded";
		    location.reload();
         }
   	})
   </script>
    <script type="text/javascript">
    	$(function(){
    		xuanzhuan();//头像旋转
    		
    		/*获取url中的参数*/
	    	function getQueryString(name) {
			    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
			    var r = window.location.search.substr(1).match(reg);
			    if (r != null) {
			        return decodeURIComponent(r[2]);
			    }
			    return null;
			}
			// 这样调用：
			var headImageUrl=getQueryString("headImageUrl");//头像
			var imageUrl=getQueryString("imageUrl");//专辑头（转盘）
			var userName=getQueryString("userName");//作者姓名
			var musicName=getQueryString("musicName");//歌曲名
			/*获取url中的*/
    		function xuanzhuan(){/*作者头像一直旋转*/
    			var count=0;
    			var time=setInterval(function(){
    				count+=1;
    				var c="rotate("+parseInt(count)+"deg)";
                    $("#disc img").css('transform',c);
    			},100);
    		}/*作者头像一直旋转*/
    		$("#download-APP button").mousedown(function(){/*更改下载按钮的透明度*/
    			$(this).css('opacity','1');
    		})
    		/*设置作者名和歌曲名*/
    		//change();
            function change(){
            	$("#media-body").find('h4').text(musicName);
                $("#media-body").find('span').text(userName);
                $("#headImageUrl").attr('src',headImageUrl);
                $("#imageUrl").attr('src',imageUrl);
                //http://127.0.0.1:8020/music/2.html?musicName=南山南&userName=刘德华
            }
            
    	})
    </script>
</head>
<body>
	<img src="http://imgsrc.baidu.com/image/c0%3Dshijue1%2C0%2C0%2C294%2C40/sign=32c015eaf6039245b5b8e94ceffdceb7/d788d43f8794a4c28c10040c04f41bd5ad6e39e2.jpg" class="blur navbar-fixed-top" />
	<div id="music-contain" class="navbar-fixed-top">
    	</div> 	   
		<div id="music-tittle" class="navbar-fixed-top"><!--头像、名称放置在这里-->
	         <div class="media">
			  <div class="media-left">
			    <a href="#">
			      <img class="media-object" id="headImageUrl" src="img/bgimg2.jpg" alt="...">
			    </a>
			  </div>
			  <div class="media-body" id="media-body" style="padding: 10px;">
			    <h4 class="media-heading"  style="padding: 10px;">Media heading</h4>
			        <span id=""  style="padding: 10px;">作者 </span> 
			  </div>
			</div> 
		</div><!--头像、名称放置在这里-->
	     <div id="music-body" style="margin: 150px 0;">
	     	
	     </div>
	       
	     <div id="music-foot" class="navbar-fixed-bottom"><!--音乐滚动条放置-->
	     	<div id="disc"><!--存放碟片，头像转动-->
	     		<!--<div id="music-pho">-->
	     			<img id="imageUrl" src="img/bgimg2.jpg"/>
	     		<!--</div>-->
	     	</div>
		    <audio controls="controls"  loop="loop" preload="auto"src="img/1.mp3">
			      你的浏览器不支持audio标签
			</audio>
            <div id="download-APP">
            	<div style="float: left;margin-left: 30px;"><img style="height: 40px;width: 40px;margin-right: 20px;" src="img/f.gif" alt="" />汇泉音乐</div>
            	<div style="float: right;margin-right: 30px;"><a href="http://www.baidu.com"><button class="btn btn-primary" style="margin-right: 0px;">下载app</button></a></div>
            </div>
	     </div><!--音乐滚动条放置-->

</body>
</html>

这是一个音乐播放的界面，在里面有一段代码是：

function xuanzhuan(){/*作者头像一直旋转*/
    			var count=0;
    			var time=setInterval(function(){//设置一个计时器，每个0.1秒，转1个角度
    				count+=1;
    				var c="rotate("+parseInt(count)+"deg)";
                    $("#disc img").css('transform',c);
    			},100);
    		}/*作者头像一直旋转*/

运行的界面是：

不染心

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
js实现图片旋转效果

一、问题描述在做一个音乐播放的页面时候，想模仿网易云的一个，碟片播放的效果，需要的是图片转动。二、解决问题 *{ margin: 0 auto; padding: 0; } #music-contain
复制链接

扫一扫