唱片旋转播放效果 |
您所在的位置：网站首页 › css怎么设置视频自动播放效果 › 唱片旋转播放效果 |
唱片旋转播放效果
|
博客简介
本篇博客介绍一种较为方便的唱片旋转播放效果，我们用audio插入音频，并且在设计一个插入照片的div，当点击播放时，唱片旋转，点击暂停唱片回到原始位置，停止旋转。 效果展示旋转唱片设计 要点如下 用audio插入音频设置div插入照片，设置边框为圆形设置CSS动画设置监听，当点击播放时，设置div的class为animation2，点击暂停设置div的class为animation2 用audio插入音频插入视频非常简单，使用audio标签即可，并且设置控件： Sorry your brower does not support audio
插入图片后，整个布局就做好了： 设置CSS动画，从0~100%设置线性的变化关键帧，整个旋转唱片的设计中，关键的一步是，设置两个class属性，当播放点击时，设置div区域的class属性即可。这里我们设置animation1和animation2两个类，一个状态是infinite永动，另一个是paused停止： .animation1{ width: 200px; height: 200px; border:1px solid white; border-radius: 100px; overflow: hidden; float: left; animation:frame 6s linear paused; } .animation2{ width: 200px; height: 200px; border:1px solid white; border-radius: 100px; overflow: hidden; float: left; animation:frame 6s linear infinite; } 设置监听当点击播放时，设置div的class为animation2，点击暂停设置div的class为animation2，如何判断用户是否点击了播放/暂停呢？audio给我们提供了这些事件： 方法属性事件play()currentSrcplaypause()currentTimepauseload()videoWidthprogresscanPlayTypevideoHeighterror durationtimeupdate endedended errorabort pausedempty mutedemptied seekingwaiting volumeloadedmetadata height width我们这里根据play和pause事件来判断audio的播放状态，当用户点击暂停，pause返回为1，点击播放play返回为1： （1）控制唱片的旋转 function player(audio,pic) { if(audio.paused)//当前状态 { pic.setAttribute("class","animation1"); } else { pic.setAttribute("class","animation2"); } } （2）设置监听： function playe_Pause() { if(!document.getElementsByTagName) return false; var audioes=document.getElementsByTagName("audio"); var pictures=document.getElementsByTagName('article')[0].getElementsByTagName("img"); if(!audioes||!pictures) return false; audioes[0].addEventListener("pause",function(){ player(audioes[0],pictures[0].parentNode); }); audioes[0].addEventListener("play",function(){ player(audioes[0],pictures[0].parentNode); }); }这里我们为了增强函数的重用性，对函数设置了几个参数，分成了两段，完全可以写在一个函数里。 最后的效果
|
【本文地址】
今日新闻 |
推荐新闻 |