问答详情
源自:3-12 移动端项目开发——交互(page2_loading)

原代码

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

提问者:慕粉4183705 2016-10-14 21:01

个回答

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


  • 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>