码迷,mamicode.com
首页 > Web开发 > 详细

HTML5音乐播放器

时间:2016-08-30 19:40:57      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:

 <!--音乐播放器-->
        <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>

可以实现点击旋转图片播放和暂停背景音乐。

HTML5音乐播放器

标签:

原文地址:http://www.cnblogs.com/zsl123/p/5823197.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!