码迷,mamicode.com
首页 > 编程语言 > 详细

javascript 网页图标音乐切换

时间:2014-12-03 21:00:36      阅读:195      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   ar   color   os   sp   java   

图片名称   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" onclick="playVid()"></button> <button class="hide" type="button" id="vid" onclick="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>

 

javascript 网页图标音乐切换

标签:style   blog   http   io   ar   color   os   sp   java   

原文地址:http://www.cnblogs.com/xinlinux/p/4141029.html

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