JQuery插件製做具備動態效果的網頁

時間 2019-11-08

標籤 jquery 插件製做具備動態效果網頁欄目 JQuery 简体版

原文原文鏈接

JQuery插件製做具備動態效果的網頁 javascript

前言css

JQueryjava

　　今天我給你們介紹一個運用JQuery插件製做的動態網頁——iphone 5C 宣傳頁面。這個網頁中運用到了fullpage.js和move.js兩個插件。jquery

動態效果web

1導入插件

在這個頁面中須要用到三款插件，分別是jquery-3.1.1.js（JQuery 3.1.1版本）、jquery.fullPage.js（附帶jquery.fullPage.css）和 move.js 動畫插件。iphone

導入順序也如上所示，由於後兩款是使用JQuery編寫的，於是須要優先導入jquery-3.1.1.js，還須要一併將jquery.fullPage.css導入HTML文件。函數

結構以下，導入完成後，咱們開始編寫HTML代碼。動畫

<link rel="stylesheet" type="text/css" href="../css/jquery.fullPage.css"/>
<link rel="stylesheet" type="text/css" href="../css/iphone.css"/>

<script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
<script type="text/javascript" src="../js/jquery.fullPage.js"></script>
<script type="text/javascript" src="../js/move.js"></script>

2HTML

<body>       
        <div id="fullpage">
            <div class="section" id="section1">
                <h1>fullPage.js — iPhone 5C演示</h1>
                <img src="../img/iphone1.jpg"/>
            </div>
            <div class="section" id="section2">
                <img src="../img/iphone2.png" class="img2"/>
                <img src="../img/iphone3.png" class="img3"/>
                <img src="../img/iphone4.png" class="img4"/>
                <div class="description">
                    <h1>A powerful plugin</h1>            
                    <strong>fullPage.js</strong> callbacks allow you to create amazing dynamic sites with a bit of imagination. This example tries to reproduce the Apple iPhone-5c website animations as an example of what fullPage.js is capable of.                    
                </div>
                
            </div>
            <div class="section" id="section3">
                <img src="../img/iphone-yellow.png" class="yellow"/>
                <img src="../img/iphone-red.png"/ class="red">
                <img src="../img/iphone-blue.png" class="blue"/>
                <div class="description">
                    <h1>Amazing stuff</h1>
                    Combining <strong>fullPage.js</strong> with your own CSS styles and animations, you will be able to create something remarkable. 
                </div>                              
            </div>
            
            <div class="section" id="section4">
                <img src="../img/iphone-green.png"  class="green"/>
                <img src="../img/iphone-two.png"  class="two"/>
    
                    <div class="description">
                        <h1>Just a demo</h1>
                        This is, of course, just a demo. I didn't want to spend much time on it.
                        Don't expect it to work perfectly in all kind of screens.
                        It has been designed to work on 1180px width or over on modern browsers with CSS3.
                    </div>
            </div>         
        </div>     
    </body>

3CSS樣式

*{
    margin: 0px;
    padding: 0px;
}
#fullpage{
    min-width:1250px ;
}
.section{
    min-height: 600px;
}
#section1{
    background-color: #F0F2F4;
    overflow: hidden;
    text-align: center;
}
#section1 h1{
    font-size: 70px;
    color: #333333;
    text-align: center;
    margin: 60px 0px;    
}
#section2{
    position: relative;
    overflow: hidden;
}

#section2 .description{
    width: 370px;
    position: absolute;   <!--首先固定動畫執行以前，圖片的位置-->
    top: 200px;
    right: 130px;
    color: #808080;
    font-size: 18px;
    line-height: 35px;
}

#section2 .description h1{
    font-size: 36px;
    margin-top: 15px;
    margin-bottom: 15px;
}
#section2 img{
    position: absolute;
    left: 0px;
    bottom: -60px;
}
#section2 .img3{
    z-index: 3;
}

#section3{
    position: relative;
    overflow: hidden;
}
#section3 .description{
    width: 600px;
    position: absolute;
    top: 150px;
    right: 200px;
    color: #808080;
    font-size: 18px;
    line-height: 35px;
}

#section3 .description h1{
    font-size: 36px;
    margin-top: 15px;
    margin-bottom: 15px;
}
#section3 img{
    position: absolute;
}
#section3 .red{
    left: 150px;
    top: 260px;
}
#section3 .yellow{
    left: -180px;
    bottom: -420px;
}
#section3 .blue{
    bottom: -420px;
    left: 490px;
}

#section3{
    position: relative;
    overflow: hidden;
}

#section4 .green{
    position: absolute;
    top: 200px;
    left: 150px;
}
#section4 .description{
    width: 90%;
    position: absolute;
    top: 100px;
    left: 5%;
    color: #808080;
    font-size: 14px;
    line-height: 25px;
    text-align: center;
}
#section4 .description h1{
    font-size: 36px;
    margin-top: 15px;
    margin-bottom: 15px;
}
#section4 .two{
    position: absolute;
    bottom: -200px;
    left: 490px;
}

4各類調用JQuery插件

<script type="text/javascript">           
            $(function(){
                $("#fullpage").fullpage({      //調用fullpage插件
                    navigation : true,
                    verticalCentered : false,
                    anchors:["page1","page2","page3","page4"],
                    
                    onLeave:function(index,nextIndex,direction){    // 當頁面即將滾動離開的時候觸發。設置目的：爲了使動畫循環執行。
                        switch(index){   // index：當前所在頁面的序號
                            case 2:
                                move(".img2").delay(600).x(0).duration("0s").end();
                                move(".img3").delay(600).x(0).duration("0s").end();
                                move(".img4").delay(600).x(0).duration("0s").end();
                                break;
                            case 3:
                                if(nextIndex != 4){
                                    move(".red").delay(0).y(0).duration("0s").end();
                                    move(".blue").delay(0).y(0).duration("0s").end();
                                    move(".yellow").delay(0).y(0).duration("0s").end();
                                }
                                move(".green").delay(0).y(30).duration("1.5s").end();                                
                                break;

                            default:
                                break;
                        }
                        
                        switch(nextIndex){        // nextIndex：即將去往頁面的序號；  
                            case 2:
                                move(".img2").delay(300).x(-65).duration(".5s").end();
                                move(".img3").delay(300).x(290).duration(".5s").end();
                                move(".img4").delay(300).x(630).duration(".5s").end();
                                break;                                
                            case 3:
                                move(".red").delay(0).y(-400).duration("1.5s").end();   // 調用move 調整動畫顯示位置，執行時間
                                move(".blue").delay(0).y(-400).duration("1.5s").end();
                                move(".yellow").delay(0).y(-400).duration("1.5s").end();
                                move(".green").delay(0).y(-360).duration("1.5s").end();
                            break;
            
                            default:
                                break;
                        }                                           
                    },
                    
                });
            });  // 文檔就緒函數 
                        
 </script>