音乐旋转播放

原创 tsf2014 随笔 笔录 302阅读 2018-01-08 17:19:23 举报

/样式开始/
<style type="text/css">
.Bhide{display: none; }
.btnOn{position: absolute;

animation:rotating 1.2s linear infinite;-webkit-animation:rotating 1.2s linear infinite;

}

@keyframes rotating{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
@-webkit-keyframes rotating{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}

.Bcomm{position: absolute;
right: 0.3rem;
top: 0.3rem;
z-index:500;
width:1rem;
height: 1rem;
background: url(../images/mic.png) no-repeat center center;
background-size: 100%;
}
</style>
/样式结束/
/js开始/
<script type="text/javascript">
$(function () {

        /* 音乐旋转播放*/
    var media=$('#media')[0];//Jquery选择器获取的是jquery对象,0才是对应的audio对象,所以不能直接操作。
    media.play();
    $('#music').click(function(){

        var Cname=$('#music').hasClass("btnOn");

        (Cname==true)?$('#music').removeClass('btnOn'):$('#music').addClass('btnOn');
        (Cname==true)?media.pause():media.play();
    });

</script>

/js结束/
<div id="music" class="Bcomm btnOn Bhide"><audio id="media" loop="loop" src="images/goodtime.mp3"></audio></div>
/在微信中需加以下代码,防止苹果手机在微信中打开没有音乐/
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>;
wx.ready(function () {
var media=$('#media')[0];
media.play();
});

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复