原代码-慕课网

首页课程实战体系课手记专栏慕课教程

原代码

来源：3-12 移动端项目开发——交互(page2_loading)

慕粉4183705

2016-10-14 21:01

请问有这个小Dame的所有代码吗？求解答

写回答关注

2回答

Evil1984: 2016-10-16 17:16:23

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)
     
}

0 0

Evil1984: 2016-10-16 17:14:30

<!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 0

HTML5+CSS3实现春节贺卡

又逢新春佳节，春节贺卡搞起来，学会HTML5+CSS3实现春节贺卡

110057 学习 · 450 问题

查看课程

相似问题

sublime怎么快速把注释代码还原

回答 3

请发源代码

回答 3

视频的代码

回答 1

css代码问题

回答 2

代码快捷键

回答 1

打开慕课网App查看更多内容