欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript Slip.js實(shí)現(xiàn)整屏滑動(dòng)的手機(jī)網(wǎng)頁(yè)

 更新時(shí)間：2015年11月25日 15:50:23   作者：彼岸花在開(kāi)  
Slip.js能做什么？Slip.js可以讓你的手機(jī)網(wǎng)站像原生手機(jī)軟件一樣慣性滾動(dòng)，手觸圖片輪換等等，對(duì)Slip.js感興趣的小伙伴們可以參考一下

有了Slip.js，你只管寫(xiě)HTML，CSS，如果邏輯簡(jiǎn)單，一行JS代碼就可以搞定，大大提升了開(kāi)發(fā)的效率。不吹牛，上面的demo，不到半小時(shí)我就寫(xiě)好了。

具體怎么做呢？比如有個(gè)需求是：

我們有4個(gè)頁(yè)面，每個(gè)頁(yè)面有一張圖片，每次手指滑動(dòng)都切換一整屏。

首先看HTML：

<!doctype html>
...
<script type="text/javascript" src="slip.js"></script>
<body>
...
<div id="container">
 <div class="page page-1"><img src="img/1.png"></div>
 <div class="page page-2"><img src="img/2.png"></div>
 <div class="page page-3"><img src="img/3.png"></div>
 <div class="page page-4"><img src="img/4.png"></div>
</div>
</body>

最后看JS：

var container = document.getElementById('container');
var pages = document.querySelectorAll('.page');
var slip = Slip(container, 'y').webapp(pages);

解說(shuō)：

  • Slip：暴露到全局的方法，只要你引入slip.js，就可以得到這個(gè)實(shí)用牛逼的方法。
  • container: 被滑動(dòng)的容器，里面是每個(gè)滑動(dòng)頁(yè)面。
  • 'y': 頁(yè)面滑動(dòng)的方向，你也可以傳入'x'。
  • webapp: 設(shè)置頁(yè)面展現(xiàn)為全屏滑動(dòng)頁(yè)面的方法。
  • pages: 頁(yè)面元素列表。

說(shuō)好的一行代碼搞定的：

Slip(document.getElementById('container'), 'y').webapp();
可以發(fā)現(xiàn)，上面的一行代碼并沒(méi)有定義pages:

當(dāng)webapp方法不傳遞參數(shù)的時(shí)候，Slip會(huì)獲取container的直接子元素（兒子元素）作為pages。

至此，一個(gè)全屏滑動(dòng)網(wǎng)頁(yè)就完成了，難以想象的簡(jiǎn)單快速。我用半小時(shí)，你10分鐘應(yīng)該就可以。

當(dāng)然：Slip.js還有很多更強(qiáng)大的功能，比如你可以自己定義頁(yè)面滑動(dòng)時(shí)要做什么，PM看你完成的這么快，就給你加了很有意思的需求：

當(dāng)頁(yè)面滑動(dòng)到最后一頁(yè)的時(shí)候，刷新一下。。。

你只需要加幾行代碼就可以搞定：

Slip(document.getElementById('container'), 'y').webapp().end(function() {
 if (this.page === 3) location.reload();
});

看，是不是很簡(jiǎn)單，是不是還沒(méi)來(lái)得及抱怨這個(gè)需求，就已經(jīng)完成它了，是不是有種前所未有的快感。

以上就是本文的全部?jī)?nèi)容，希望大家喜歡，這篇文章只是一個(gè)開(kāi)始，之后會(huì)有更加全面精彩的文章等著大家，希望大家不要錯(cuò)過(guò)。

相關(guān)文章

最新評(píng)論