功能实现

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

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

效果展示

原理说明

【1】旋转原理

【2】余弦定理

代码实现

HTML

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 = '';//当歌曲可以开始不停顿地一直播放时，显示播放按钮audio.oncanplaythrough = function(){ mark = true; control.innerHTML = ''}; //当歌曲在播放过程中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 = '';}//给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 = ''; }else{ audio.pause(); this.innerHTML = ''; } lastBtn = control.innerHTML; }}; //当鼠标移入control时，标记enter为truecontrol.onmouseover = function(){ if(mark){ enter = true; }} //当鼠标移出control时，标记enter为falsecontrol.onmouseout = function(){ if(mark){ enter = false; }} 

源码查看