原代码
请问有这个小Dame的所有代码吗？求解答
慕粉4183705
2016-10-14
2 回答
window.onload = function(){
var music = document.getElementById('music');
var audio = document.getElementsByTagName('audio')[0];
var page1 = document.getElementById('page1');
var page2 = document.getElementById('page2');
var page3 = document.getElementById('page3');
//音乐停止 动画停止
audio.addEventListener("ended",function(event){
music.setAttribute("class","");
},false)
//点击停止和播放 音乐 动画
music.addEventListener("touchstart",function(event) {
if (audio.paused) {
audio.play();
this.setAttribute("class","play");
} else {
audio.pause();
this.setAttribute("class","");
}
},false)
//切换页面
page1.addEventListener("touchstart",function(event) {
page1.style.display = "none";
page2.style.display = "block";
page3.style.display = "block";
page3.style.top = "100%";
setTimeout(function() {
page2.setAttribute("class","page fadeOut");
page3.setAttribute("class","page fadeIn");
},5500);
},false)
}<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <meta name="format-detection" content="telephone=no"> <title>慕课贺春</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <script type="text/javascript" src="js/script.js" > </script> </head> <body> <div> <img src="music_pointer.png" > <img id="music" src="music_disc.png" > </div> <div id="page1"> <div></div> <div>点击屏幕<br>开启好运2016</div> <div></div> <div>2016年慕课网新年特献</div> </div> <div id="page2"> <div class="bg p2_bg_loading"></div> <div></div> <div></div> <div></div> </div> <div id="page3"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <audio autoplay="true"> <source src="file:///C:/Users/Administrator/Desktop/imges/happynewyear.mp3" type="audio/mpeg"> </audio> </body> </html>
举报
0/150
提交
取消
