HTML5音乐播放器
<!--音乐播放器--> <div style="position:absolute; top:10px; right:10px; z-index:10000;"> <audio preload="load" id="mmm" src="{:CUSTOM_TEMPLATE_PATH}Index/ColorV5/bg.mp3"></audio> <img style="width:35px;height:35px;" src="{:CUSTOM_TEMPLATE_PATH}Index/ColorV5/images/music.png" id="img" class="image" onclick="timeout ? stopAnim() : startAnim()" /> </div> <script type="text/javascript"> var timeout, rotate = 0; function startAnim() { var Media = document.getElementById("mmm"); timeout = setInterval(function () { var img = document.getElementById("img"); var rotateStyle = "rotate(" + rotate + "deg)"; img.style.transform = rotateStyle; img.style["-moz-transform"] = rotateStyle; img.style["-webkit-transform"] = rotateStyle; img.style["-o-transform"] = rotateStyle; img.style["-ms-transform"] = rotateStyle; rotate += 6; if (rotate > 360) { rotate = 0; } }, 30); Media.play(); } function stopAnim() { clearInterval(timeout); timeout = null; var Media = document.getElementById("mmm"); Media.pause(); } startAnim(); </script>
可以实现点击旋转图片播放和暂停背景音乐。