首頁 > web前端 > js教程 > 主體

javascript Slip.js實作整屏滑動的手機網頁_javascript技巧

WBOY
發布: 2016-05-16 15:29:50
原創
1395 人瀏覽過

有了Slip.js,你只管寫HTML,CSS,如果邏輯簡單,一行JS程式碼就可以搞定,大大提升了開發的效率。不吹牛,上面的demo,不到半小時我就寫好了。

具體怎麼做呢?例如有個需求是:

我們有4個頁面,每個頁面都有一張圖片,每次手指滑動都切換一整螢幕。

先看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);
登入後複製

解說:

  • Slip:暴露到全局的方法,只要你引入slip.js,就可以得到這個實用牛逼的方法。
  • container: 被滑動的容器,裡面是每個滑動頁面。
  • 'y': 頁面滑動的方向,你也可以傳入'x'。
  • webapp: 設定頁面展現為全螢幕滑動頁面的方法。
  • pages: 頁面元素清單。

說好的一行程式碼搞定的:

Slip(document.getElementById('container'), 'y').webapp();
可以發現,上面的一行程式碼並沒有定義pages:

當webapp方法不傳遞參數的時候,Slip會取得container的直接子元素(兒子元素)作為pages。

至此,一個全螢幕滑動網頁就完成了,難以想像的簡單快速。我用半小時,你10分鐘應該可以。

當然:Slip.js還有很多更強大的功能,例如你可以自己定義頁面滑動時要做什麼,PM看你完成的這麼快,就給你加了很有趣的需求:

當頁面滑動到最後一頁的時候,刷新一下。 。 。

你只要加幾行程式碼就可以搞定:

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

你看,是不是很簡單,是不是還來不及抱怨這個需求,就已經完成它了,是不是有種前所未有的快感。

以上就是本文的全部內容,希望大家喜歡,這篇文章只是一個開始,之後會有更全面精彩的文章等著大家,希望大家不要錯過。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!