Rumah > hujung hadapan web > html tutorial > 使用余弦定理制作磁盘形状h5音乐播放器_html/css_WEB-ITnose

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Lepaskan: 2016-06-24 11:31:29
asal
1334 orang telah melayarinya

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

功能实现

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

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

 

效果展示

 

原理说明

【1】旋转原理

【2】余弦定理

代码实现

HTML

<div class="outer">    <img src="/static/imghw/default1.png"  data-src="img/huochai.jpg"  class="lazy" alt="match"    style="max-width:90%"  style="max-width:90%">    <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>
Salin selepas log masuk

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- */}
Salin selepas log masuk

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;    }}    
Salin selepas log masuk

 

源码查看

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan