欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

使用余弦定理制作磁盘形状h5音乐播放器_html/css_WEB-ITnose

程序员文章站 2022-03-25 23:50:48
...
目录 [1]功能实现 [2]效果展示 [3]原理说明 旋转原理 余弦定理 [4]代码实现 HTML CSS JS [5]源码查看

功能实现

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

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

效果展示

原理说明

【1】旋转原理

【2】余弦定理

代码实现

HTML

使用余弦定理制作磁盘形状h5音乐播放器_html/css_WEB-ITnose

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;    }}    

源码查看