JAvascript Webアイコン音楽切り替え
6122 ワード
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>