你的位置:首页 > 网页设计

[网页设计]使用余弦定理制作磁盘形状h5音乐播放器


目录
[1]功能实现 [2]效果展示 [3]原理说明 旋转原理 余弦定理 [4]代码实现 HTML CSS JS [5]源码查看

功能实现

  [1]歌曲播放进度转换成视觉的旋转角度

  [2]点击磁盘任意位置歌曲跳转到相应进度

 

效果展示

 

原理说明

【1】旋转原理

【2】余弦定理

代码实现

HTML

<div class="outer">  <img src="img/huochai.jpg" alt="match" width="122" height="122">  <div id="player" class="box">    <div class="box-in">      <div class="box-in-in"></div>    </div>    <div class="box-con"></div>  </div>  </div><audio id="audio" src="myocean.mp3"></audio>

CSS

body{  margin: 0;}img{  display: block;  border: none;}.outer{  position: relative;  width: 122px;  height: 122px;  margin: 30px auto;    overflow: hidden;  border-radius: 50%;}.box{  position: absolute;  top: 0;  left: 0;   width: 122px;  height: 122px;  background: url('img/music.png');}.box-in{  position: absolute;  top: 0;  right: 0;  width: 50%;  height: 100%;  overflow: hidden;}.box-in-in{  position: absolute;  margin-left: -61px;  width: 61px;  height: 100%;  background: black url('img/music.png');  transform-origin: right;  transform:rotate(0deg);  }.box-con{  position: absolute;  left: 50%;  top: 50%;  transform: translate(-50%,-50%);  height: 40px;  width: 40px;  font: 14px/40px "iconfont";  color: black;  text-align: center;  cursor:pointer;  background-color: white;  border-radius: 50%;}@font-face {font-family: 'iconfont';  src: url('font/iconfont.eot'); /* IE9*/  src: url('font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */  url('font/iconfont.woff') format('woff'), /* chrome、firefox */  url('font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/  url('font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */}

JS

/*功能实现[1]播放、暂停[2]调整定位指示 */  var player = document.getElementById('player');var control = player.getElementsByClassName('box-con')[0];var rotate = player.getElementsByClassName('box-in-in')[0];var hidden = player.getElementsByClassName('box-in')[0];//作为歌曲是否加载完毕的标记var mark = false;//作为鼠标是否移入控制按钮区域的标记var enter = false;//记录按钮的上一个值var lastBtn = '&#xe61d;';//当歌曲可以开始不停顿地一直播放时,显示播放按钮audio.oncanplaythrough = function(){  mark = true;  control.innerHTML = '&#xe61d;'};  //当歌曲在播放过程中audio.ontimeupdate = function(){  //播放按钮记录当前进度百分比  if(!enter){    control.innerHTML = Math.floor(audio.currentTime/audio.duration*100) + '%';  }else{    control.innerHTML = lastBtn;  }  //旋转相应度数  rotate.style.transform = 'rotate('+ audio.currentTime/audio.duration*360 + 'deg)';  if((audio.currentTime/audio.duration)<=0.5){    hidden.style.cssText = 'overflow:hidden;background:transparent';      }else{    hidden.style.cssText = 'overflow:visible;background:black url("img/music.png") 61px 0';  }  }//当鼠标点击光盘时,歌曲进度变化到对应进度,div旋转到对应角度player.onclick = function(e){  if(mark){    var e = e || event;    var n1 = e.clientX-this.parentNode.offsetLeft;     var n2 = e.clientY-this.parentNode.offsetTop;    var a = 61;    var b = Math.sqrt(Math.pow(n1-61,2)+Math.pow(n2-61,2));      var c = Math.sqrt(Math.pow(n1-61,2)+Math.pow(n2,2));    var radial = Math.acos((a*a + b*b - c*c)/(2*a*b));    //记录鼠标点击磁盘时旋转的角度    var result = 0;    if(n1 >= 61){      result = radial*180/Math.PI;    }else{      result = 360-radial*180/Math.PI;    }    audio.currentTime = audio.duration*result/360;      }  }//当歌曲播放完毕后audio.onended = function(){  //重新加载歌曲  audio.load();  //将hidden的样式恢复起始值  hidden.style.cssText = 'overflow:hidden;background:transparent';  rotate.style.transform ='rotate(0);';  //将播放按钮置为'暂停按钮'  control.innerHTML = '&#xe61d;';}//给control添加点击事件control.onclick = function(e){  var e = e || event;  if(e.stopPropagation){    e.stopPropagation();  }else{    e.cancelBubble = true;  }  if(mark){    if(audio.paused){      audio.play();      this.innerHTML = '&#xe662;';    }else{      audio.pause();      this.innerHTML = '&#xe61d;';    }      lastBtn = control.innerHTML;    }};  //当鼠标移入control时,标记enter为truecontrol.onmouseover = function(){  if(mark){    enter = true;  }}  //当鼠标移出control时,标记enter为falsecontrol.onmouseout = function(){  if(mark){    enter = false;  }}  

 

源码查看