zoukankan      html  css  js  c++  java
  • 点击图片背景音乐开始暂停,图片旋转停止

    //css部分

    .MusicImg {
    position: fixed;
    top: 2%;
    z-index: 999;
    40px;
    height: 40px;
    right: 3%;
    -webkit-animation: rotateImg 1s linear infinite;
    vertical-align: middle;
    }
    @keyframes rotateImg {
    0% {
    transform: rotate(0deg);
    }

    100% {
    transform: rotate(360deg);
    }
    }

    @-webkit-keyframes rotateImg {
    0% {
    -webkit-transform: rotate(0deg);
    }

    100% {
    -webkit-transform: rotate(360deg);
    }
    }

    //html部分

    <img src="img/hongbaoyu.png" class="MusicImg" onclick="MusicImg()" />
    <div class="audio-box" style="display: none">
    <audio id="myaudio" src="img/hongbaoyu.mp3" loop="loop" autoplay="autoplay" controls="controls">
    你的浏览器不支持HTML5
    </audio>
    </div>

    //js部分

    function MusicImg() {
    var oAudio = document.getElementById('myaudio');
    if (oAudio.paused) {
    oAudio.play();
    $(".MusicImg").css("-webkit-animation", "");
    }
    else {
    oAudio.pause();
    $(".MusicImg").css("-webkit-animation", "rotate 6s linear infinite");
    }
    }

    //解决苹果手机无法自动播放

    $(function () {
    document.addEventListener("WeixinJSBridgeReady", function () {
    $('#myaudio')[0].load();
    $('#myaudio')[0].play();
    }, false);
    })

  • 相关阅读:
    数据结构相关概念
    树的创建与遍历
    Java探索之旅(18)——多线程(2)
    Java探索之旅(17)——多线程(1)
    Java Servlet 笔记4
    Java Servlet 笔记3
    Java Servlet 笔记2
    Java Servlet 笔记1
    JavaBean实现用户登陆
    基于SSE4和多核编程的电子相册的实现
  • 原文地址:https://www.cnblogs.com/yyy251/p/9039390.html
Copyright © 2011-2022 走看看