js學習總結----綜合案例之微信應用場景（類似於微信音樂相冊）

-Advertisement-

這個demo只是一個大概的思路，具體還需要根據情況來進行上述代碼有一個地方動態設置需要動畫的ID值的代碼，下圖可以幫助你理解 ...

這個demo只是一個大概的思路，具體還需要根據情況來進行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="swiper.min.css">
    <link rel="stylesheet" type="text/css" href="animate.css">
    <style>
        html,body{
            width:100%;
            height:100%;
            overflow:hidden;
        }
        html{
            font-size:100px;/*設計稿640*960*/
        }
        .main,.swiper-container,.swiper-slide{
            width:100%;
            height:100%;
            overflow:hidden;
        }
        .page1{
            position:relative;
            background:url("../img/swiper/bg1.jpg") no-repeat;
            background-size:cover;
        }
        .page1 img{
            position:absolute;    
            opacity:0;        
        }
        .page1 img:nth-child(1){
            left:2rem;
            top:.28rem;
            width:.96rem;
            height:2.32rem;    
                
        }
        .page1 img:nth-child(2){
            right:0;
            top:.28rem;
            width:3.7rem;
            height:6rem;            
        }
        .page1 img:nth-child(3){
            left:.5rem;
            bottom:.8rem;
            width:5.5rem;
            height:5.12rem;            
        }
        .page1 img:nth-child(4){
            left:-1.6rem;
            bottom:0;
            width:7.86rem;
            height:5.88rem;            
        }
        /*實現切換完成後頁面中的元素在開始運動的思想:開始的時候當前的這個區域沒有對應的ID，當切換到這個區域的時候，我們為其增加ID，在css中我們把所有的動畫效果都放在指定的ID下，這樣的話只需要讓區域有ID，裡面的子元素就有動畫了*/
        #page1 img:nth-child(1){
            /*註意移動端的樣式寫兩套 並且不加webkit的在後*/
            -webkit-animation:bounceInLeft 1s linear 0s 1 both;
            animation:bounceInLeft 1s linear 0s 1 both;    
        }
        #page1 img:nth-child(2){
            /*註意移動端的樣式寫兩套 並且不加webkit的在後*/
            -webkit-animation:bounceInRight 1s linear .3s 1 both;
            animation:bounceInRight 1s linear .3s 1 both;    
        }
        #page1 img:nth-child(3){
            /*註意移動端的樣式寫兩套 並且不加webkit的在後*/
            -webkit-animation:bounceInUp 1s linear .6s 1 both;
            animation:bounceInUp 1s linear .6s 1 both;    
        }
        #page1 img:nth-child(4){
            /*註意移動端的樣式寫兩套 並且不加webkit的在後*/
            -webkit-animation:bounceInUp 1s linear .9s 1 both;
            animation:bounceInUp 1s linear .9s 1 both;    
        }
        .page2{
            position:relative;
            background:url("../img/swiper/bg2.jpg") no-repeat;
            background-size:cover;
        }
        .page2 img{
            position:absolute;
            top:2.5rem;
            opacity:0;
        }
        .page2 img:nth-child(1){
            top:0;
            left:0;
            width:3.4rem;
            height:1.74rem;
        }
        .page2 img:nth-child(2){
            left:1.48rem;
        }
        .page2 img:nth-child(3){
            left:3.2rem;
        }
        .page2 img:nth-child(4){
            left:4.7rem;
        }
        
        #page2 img:nth-child(1){
            -webkit-animation:bounceInLeft 1s linear 0s 1 both;
            animation:bounceInLeft 1s linear 0s 1 both;    
        }
        #page2 img:nth-child(2){
            -webkit-animation:zoomIn 1s linear .3s 1 both;
            animation:zoomIn 1s linear .3s 1 both;    
        }
        #page2 img:nth-child(3){
            -webkit-animation:zoomIn 1s linear .6s 1 both;
            animation:zoomIn 1s linear .6s 1 both;    
        }
        #page2 img:nth-child(4){
            -webkit-animation:zoomIn 1s linear .9s 1 both;
            animation:zoomIn 1s linear .9s 1 both;    
        }

        .arrow{
            position:absolute;
            left:50%;
            bottom:.2rem;
            z-index:10;
            margin-left:-.24rem;
            width:.48rem;
            height:.36rem;
            background:url("../img/swiper/web-swipe-tip.png") no-repeat;
            background-size:100% 100%;
            
            -webkit-animation:bounce 1s linear 0s infinite both;
            animation:bounce 1s linear 0s infinite both;
        }

        .music{
            display:none;
            position:absolute;
            top:.2rem;
            right:.2rem;
            z-index:10;
            width:.6rem;
            height:.6rem;
            background:url("../audio/music.svg") no-repeat;
            background-size:100% 100%;
        }
        .music.move{
            -webkit-animation :musicMove 1s linear 0s infinite both;
            animation :musicMove 1s linear 0s infinite both;
        }
        .music audio{
            display:none;
        }
        @-webkit-keyframes musicMove{
            0%{
                -webkit-transform:rotate(0deg);
                transform:rotate(0deg);
            }
            100%{
                -webkit-transform:rotate(360deg);
                transform:rotate(360deg);
            }
        }
        @keyframes musicMove{
            0%{
                -webkit-transform:rotate(0deg);
                transform:rotate(0deg);
            }
            100%{
                -webkit-transform:rotate(360deg);
                transform:rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <section class='main'>
        <!--MUSIC-->
        <div class='music' id='musicMenu'>
            <audio src="beyond.mp3" preload = 'none' loop autoplay></audio id='musicAudio'>
            <!-- <audio>
                <source src='beyond.mp3' type='audio/mpeg'/>
                <source src='beyond.wav' type='audio/wav'/>
                <source src='beyond.ogg' type='audio/ogg'/>
            </audio> -->
        </div>
        <!--CONTAINER-->
        <div class='swiper-container'>
            <div class='swiper-wrapper'>
                <div class='swiper-slide page1'>
                    <img src="img/swiper/page1-text1.png" alt="">
                    <img src="img/swiper/page1-text2.png" alt="">
                    <img src="img/swiper/page1-text3.png" alt="">
                    <img src="img/swiper/page1-text4.png" alt="">
                </div>
                <div class='swiper-slide page2'>
                    <img src="img/swiper/page2-text1.png" alt="">
                    <img src="img/swiper/page2-text2.png" alt="">
                    <img src="img/swiper/page2-text3.png" alt="">
                    <img src="img/swiper/page2-text4.png" alt="">
                </div>
            </div>
        </div>
        <!--ARROW-->
        <div class='arrow'></div>

        
    </section>
    <script charset='utf-8' src='swiper.min.js'></script>
    <script>
        //rem
        ~function(){
            var desW = 640,
                winW = document.documentElement.clientWidth,
                ratio = winW / desW,
                oMain = document.querySelector(".main");
            if(winW>desW){
                oMain.style.margin = "0 auto";
                oMain.style.width = desW + 'px';
                return;
            }
            document.documentElement.style.fontSize = ratio*100+"px";

        }()
        new Swiper('.swiper-container',{
            direction:"vertical",
            loop:true,
            /*當切換結束後，給當前展示的區域添加對應的ID，由此實現對應的動畫效果*/
            onSlideChangeEnd:function(swiper){
                var slideAry = swiper.slides;//獲取當前一共有多少個活動快（包含loop模式前後多加的兩個）
                var curIn = swiper.activeIndex;//當前展示的這個區域的索引
                var total = slideAry.length;
                //計算ID是PAGE?
                var targetId = 'page';
                switch(curIn){
                    case 0:
                        targetId += total - 2;
                        break;
                    case total - 1:
                        targetId += 1;
                        break;
                    default:
                        targetId += curIn
                }

                //給當前的活動塊設置ID即可,還要把其餘的移除
                [].forEach.call(slideAry,function(item,index){
                    if(curIn === index){
                        item.id = targetId;
                        return;
                    }
                    item.id = null;
                })
                slideAry[curIn].id = targetId;

                //最後把animate.css裡面的動畫to裡面添加opacity:1
            }
        })

        //MUSIC
        ~function(){
            var musicMenu = document.getElementById('musicMenu'),
                musicAudio = document.getElementById('musicAudio');

            musicMenu.addEventListener('click',function(){
                if(musicAudio.paused){
                    musicAudio.play();
                    musicMenu.className = "music move";
                    return;
                }
                musicAudio.pause();
                musicMenu.className = "music";

            })
            function controlMusic(){
                musicAudio.volume = 0.1;
                musicAudio.play();
                musicAudio.addEventListener('canplay',function(){
                    musicMenu.style.display = "block";
                    musicMenu.className = "music move";
                })
            }
            window.setTimeout(controlMusic,1000)
        }()
    </script>
</body>
</html>

上述代碼有一個地方動態設置需要動畫的ID值的代碼，下圖可以幫助你理解

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

立即表達式的多種寫法與註意點以及in操作符的作用

立即表達式，在javascript中非常常見，採用立即表達式可以形成一個局部作用域，常配合閉包實現模塊化編程等其他用途，接下來我們看看，在大多數的框架中，立即表達式都有哪些寫法，以及需要註意的點，另外再介紹下in操作符的用法 1、通過小括弧把函數聲明變成表達式，然後再外面加個小括弧就可以達 ...
JQ中find()與filter()的區別

剛開始學的時候,對於find()和filter()有點理不清楚,下麵通過案例相信就可以很快的區分清楚以下是代碼 find彈出的是 filter()彈出的是下麵我們添加div的class是rain find()彈出結果是 fliter彈出結果是通過以上案例,我們就清楚的知道,find()是查找某 ...
js 中引用類型的深拷貝和淺拷貝的區別

一、曾經在讀JQ源碼的時候，對深拷貝算是有了一點的理解。我們在項目中是不是經常會遇到這樣的問題呢？後臺返回一個數組對象（引用類型）.次數在頁面渲染中需要對部分數據進行處理比如：銀行卡62345092534 （這麼長）但在頁面顯示的時候，只顯示中國銀行（3118）但是傳給後臺的時候。又要傳62 ...
放開那個UI 妹子，讓我來（上）

一、前言今天要學習的內容：今天主要是稍微總結一下，頁面中如何用字體代替圖片，省事，省時，方便，實用！小蘇啰嗦：人都是有惰性的。真的。剛開始我們有一個經驗豐富的美工，加上我們關係又非常好，以至於每次我都是等著她把設計圖給我，我才開始碼html。遇到圖片的地方，會切的就自己切了，不會的，就直接讓美工 ...
JavaScript中函數function fun(){}和 var fun=function(){}的區別

function fun(){} 和 var fun=function(){}的區別標題有點長···· 廢話少說，其實他們的主要區別就是“函數聲明的提前行為”. 正常情況下兩種方式都會進行正常的編譯，並輸出“hello world!”，下麵把函數調用放在上面再測一下。前者不會被提升，後者被提升到 ...
今天聊一聊nuxt.js（上）

背景近期在做內部系統的重構，從一線業務徹底的重構，經過充分的考慮我們準備把這個項目打造成前臺業務的試驗站，比如ssr和一些其他的前沿技術的探索，積累充分的經驗後待合適的契機應用到C端的項目中。既然涉及到重構，避免不了老生常談的話題技術選型。當然開始還是走了一些彎路，因為是後臺項目，最重要的當然是 ...
封裝ajax

1 2 53 ...
h5-文本框

h5-文本框 ...