javascript 网页图标音乐切换

最新推荐文章于 2021-10-26 06:31:17 发布

weixin_34228617

最新推荐文章于 2021-10-26 06:31:17 发布

阅读量130

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xinlinux/p/4141029.html

版权

图片名称   sprite.zip  


<!doctype html>
<html>
    <head>
    </head>
<style>
    .css{
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: -10;
        background-position: center 0;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
        zoom: 1;
        background-image: url("117.jpg");
    }
    
    #video1{
        display:none;
    }
    #play{
        width: 60px;
        height: 61px;
        background:url(sprite.png) no-repeat;
        background-position: -60px 0px;
        border:none;
    }

    #vid{
        width: 60px;
        height: 61px;
        background:url(sprite.png) no-repeat;
        background-position: 0 0;
        border:none;
    }
    .hide{
        display:none;
    }
</style>

        
    <body>
        <div class="css">
        </div>
        <audio src="1.mp3" controls="controls" id="video1">
           不支持
        </audio>
    
        <button type="button" id="play" οnclick="playVid()"></button>
        <button class="hide" type="button" id="vid" οnclick="pauseVid()"></button>
    </body>


<script>
var myVideo=document.getElementById("video1");
var Oplay = document.getElementById('play');
var Ovid = document.getElementById('vid');
Oplay.onclick=function(){
    this.style.display='none';
    Ovid.style.display='block';
     myVideo.play();
}
Ovid.onclick=function(){
    this.style.display='none';
    Oplay.style.display='block';
      myVideo.pause();
}

/**

function playVid()
  {
  myVideo.play();
  }

function pauseVid()
  {
  myVideo.pause();
  }
  
  */
</script>
</html>