JQuery插件制作具有动态效果的网页
生活随笔
收集整理的這篇文章主要介紹了
JQuery插件制作具有动态效果的网页
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
JQuery插件 制作具有動態(tài)效果的網(wǎng)頁?
? 前 ?言
JQuery
今天我給大家介紹一個運用JQuery插件制作的動態(tài)網(wǎng)頁——iphone 5C 宣傳頁面。這個網(wǎng)頁中運用到了fullpage.js和move.js兩個插件。
?
| 動態(tài)效果 |
? ? ? ? ??? ? ??? ?
?
1導入插件
在這個頁面中需要用到三款插件，分別是jquery-3.1.1.js（JQuery 3.1.1版本）、jquery.fullPage.js（附帶jquery.fullPage.css）和?move.js 動畫插件。
導入順序也如上所示，因為后兩款是使用JQuery編寫的，因而需要優(yōu)先導入jquery-3.1.1.js，還需要一并將jquery.fullPage.css導入HTML文件。
結(jié)構(gòu)如下，導入完成后，我們開始編寫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; <!--首先固定動畫執(zhí)行之前，圖片的位置-->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各種調(diào)用JQuery插件
<script type="text/javascript"> $(function(){$("#fullpage").fullpage({ //調(diào)用fullpage插件navigation : true,verticalCentered : false,anchors:["page1","page2","page3","page4"],onLeave:function(index,nextIndex,direction){ // 當頁面即將滾動離開的時候觸發(fā)。設置目的：為了使動畫循環(huán)執(zhí)行。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(); // 調(diào)用move 調(diào)整動畫顯示位置，執(zhí)行時間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;} },});}); // 文檔就緒函數(shù) </script>| 結(jié)束語 |
到這里，這個模擬iphone 5C動態(tài)效果的網(wǎng)頁就完成了。如果有不妥當?shù)牡胤竭€請大神們指教，ths！
?
轉(zhuǎn)載于:https://www.cnblogs.com/Tracey-1023/p/7531030.html
總結(jié)
以上是生活随笔為你收集整理的JQuery插件制作具有动态效果的网页的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 使用swagger实现在线api文档自动
- 下一篇： jQuery常用的方法