使用余弦定理制作磁盘形状h5音乐播放器_html/css_WEB-ITnose
程序员文章站
2022-03-25 23:50:48
...
目录 [1]功能实现 [2]效果展示 [3]原理说明 旋转原理 余弦定理 [4]代码实现 HTML CSS JS [5]源码查看
功能实现
[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)= 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; }}
源码查看
上一篇: ps保存的图片太大微信发不了怎么办?
下一篇: <记录学习>(前三天)京东页面各种注意点