一、问题描述
在做一个音乐播放的页面时候,想模仿网易云的一个,碟片播放的效果,需要的是图片转动。
二、解决问题
<!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);
}/*作者头像一直旋转*/
运行的界面是: