社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
首頁 web前端 js教程 淺析手機滑動插件—iscroll.js

淺析手機滑動插件—iscroll.js

零到壹度
零到壹度
Apr 14, 2018 pm 02:57 PM
javascript 外掛

這篇文章給大家分享的內容是淺析手機滑動插件--iscroll.js，有著一定的參考價值，有需要的朋友可以參考一下

話不多說，直接上程式碼：

1

2

3

//实例化滚动插件

    var myScroll = new IScroll('#wrapper', {scrollX: true, freeScroll: true});//实例化

     myScroll.scrollToElement('.active',true,true);//特定元素居中

登入後複製

不知道大神是怎麼做的，我是這樣計算寬度的–

1

2

3

//计算需要滚动盒子的宽度

    var wrapper = $("#wrapper");

    wrapper.find("ul").width((wrapper.find("li").length + 1) * wrapper.find("li").width());

登入後複製

完整實例

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

<!DOCTYPE html><html><head>

    <meta charset="UTF-8">

    <title>HTML5 横向滚动</title>

    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>

    <script src="http://cdn.bootcss.com/iScroll/5.2.0/iscroll.js"></script>

    <style>

        p{     

              width:80%; margin: 50px auto; border: 1px solid seagreen; overflow: hidden;        }

        ul{     

              margin: 0; padding: 0; list-style: none;    overflow: hidden;        }

        li{      

              padding: 15px 0; float: left; list-style: none;           

              width: 100px;margin: 10px; text-align: center; background: rosybrown       

         }       

         li.active{            background: red;       

         }

 

    </style></head><body><p class="wrapper"><ul>

    <li>第1个</li>

    <li>第2个</li>

    <li>第3个</li>

    <li>第4个</li>

    <li>第5个</li>

    <li class="active">第6个</li>

    <li>第7个</li></ul></p><script>

    var ele = $("ul");

    ele.width((ele.find("li").length + 1) * (ele.find("li").width()+20));   

    var myScroll = new IScroll(&#39;p&#39;, {scrollX: true, scrollY: false});

    myScroll.scrollToElement(&#39;.active&#39;,true,true);</script></body></html>

登入後複製

#相關推薦：

gethub官網位址

比較全的中文API

一目了然的用法

#

以上是淺析手機滑動插件—iscroll.js的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

顯示更多

熱門文章

R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫：如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險：如何獲得巨型種子
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間？
3 週前 By DDD
R.E.P.O.保存文件位置：在哪里以及如何保護它？
3 週前 By DDD
顯示更多

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

顯示更多

熱門話題

gmail信箱登陸入口在哪裡
7325
9
Java教學
1625
14
CakePHP 教程
1350
46
Laravel 教程
1262
25
PHP教程
1209
29
顯示更多
Related knowledge
PyCharm新手指南：全面了解外掛程式安裝！ PyCharm新手指南：全面了解外掛程式安裝！ Feb 25, 2024 pm 11:57 PM

PyCharm是一款功能強大且受歡迎的Python整合開發環境（IDE），提供了豐富的功能和工具，讓開發者可以更有效率地編寫程式碼。而PyCharm的插件機制更是其功能擴充的利器，透過安裝不同的插件，可以為PyCharm增加各種功能和客製化的特性。因此，對於PyCharm新手來說，了解並熟練安裝插件是至關重要的。本文將為你詳細介紹PyCharm插件安裝的全

在Illustrator中載入插件時出錯[修復] 在Illustrator中載入插件時出錯[修復] Feb 19, 2024 pm 12:00 PM

啟動AdobeIllustrator時是否會彈出載入插件時出錯的訊息？一些Illustrator用戶在打開該應用程式時遇到了此錯誤。訊息後面緊跟著一系列有問題的插件。此錯誤提示表示已安裝的插件有問題，但也可能是由於VisualC++DLL檔案損壞或首選項檔案受損等其他原因所引起。如果遇到此錯誤，我們將在本文中指導您修復問題，請繼續閱讀以下內容。在Illustrator中載入外掛程式時出錯如果您在嘗試啟動AdobeIllustrator時收到「載入外掛程式時出錯」的錯誤訊息，您可以使用以下用途：以管理員身

Chrome的插件擴充功能安裝目錄是什麼 Chrome的插件擴充功能安裝目錄是什麼 Mar 08, 2024 am 08:55 AM

Chrome的插件擴充功能安裝目錄是什麼？正常情況下，Chrome外掛程式擴充功能的預設安裝目錄如下：1、windowsxp中chrome外掛程式預設安裝目錄位置:C:\DocumentsandSettings\使用者名稱\LocalSettings\ApplicationData\Google\Chrome\UserData\Default\Extensions2、windows7中chrome插件預設安裝目錄位置:C:\Users\使用者名稱\AppData\Local\Google\Chrome\User

分享Edge瀏覽器不支援此外掛程式的三種解決方法 分享Edge瀏覽器不支援此外掛程式的三種解決方法 Mar 13, 2024 pm 04:34 PM

　　用戶使用Edge瀏覽器的過程中可能會添加一些插件來滿足自己更多的使用需求。但是在添加插件時顯示不支援此插件，這該如何解決？今日小編就來給大家分享三種解決方法，快來試試看。　　方法一：嘗試用其他的瀏覽器。　　方法二：瀏覽器上的FlashPlayer可能過時或遺失，導致此外掛程式不受支援狀態，可在官網下載最新版本。　　方法三：同時按下「Ctrl+Shift+Delete」鍵。　　點選“清除資料”，重新開啟瀏覽器即可。

WebSocket與JavaScript：實現即時監控系統的關鍵技術 WebSocket與JavaScript：實現即時監控系統的關鍵技術 Dec 17, 2023 pm 05:30 PM

WebSocket與JavaScript：實現即時監控系統的關鍵技術引言：隨著互聯網技術的快速發展，即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用，並給出程式碼範例，詳細解釋其實作原理。一、WebSocket技

PyCharm社群版支援的插件足夠嗎？ PyCharm社群版支援的插件足夠嗎？ Feb 20, 2024 pm 04:42 PM

PyCharm社群版支援的插件足夠嗎？需要具體程式碼範例隨著Python語言在軟體開發領域的應用越來越廣泛，PyCharm作為一款專業的Python整合開發環境（IDE），備受開發者青睞。 PyCharm分為專業版和社群版兩個版本，其中社群版是免費提供的，但其外掛程式支援相對專業版有所限制。那麼問題來了，PyCharm社群版支援的插件夠嗎？本文將透過具體的程式碼範例

PyCharm外掛安裝技巧分享，讓你事半功倍！ PyCharm外掛安裝技巧分享，讓你事半功倍！ Feb 21, 2024 pm 06:36 PM

PyCharm是一款功能強大的Python整合開發環境，透過安裝外掛程式可進一步提高開發效率和方便開發者的工作。本文將分享一些PyCharm插件安裝的技巧，讓你事半功倍，同時提供具體的程式碼範例來示範插件的使用方法。第一步：開啟PyCharm，點選選單列中的「File」（檔案），然後選擇「Settings」（設定）。第二步：在Settings視窗中，點選左側的“

簡易JavaScript教學：取得HTTP狀態碼的方法 簡易JavaScript教學：取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教學：如何取得HTTP狀態碼，需要具體程式碼範例前言：在Web開發中，經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時，我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功，並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼，並提供一些實用的程式碼範例。使用XMLHttpRequest

See all articles