DIV CSS 佈局教程網

 　　jQuery滾動條插件nanoscroller使用指南

         本文給大家介紹的nanoScrollerJS是一款使用簡單方式實現 Mac OS X Lion 系統滾動條效果的jQuery插件。該滾動條插件利用原生的滾動條可以工作在 iPad、iPhone 和一些 Android Tablets上。

　　網站在展示信息時，如果信息量過大，解決方法主要有三種。1.分頁，將信息分頁顯示。2.整頁顯示，但是頁面過長，影響浏覽體驗。3.使用滾動條，而默認滾動條樣式太單一，用戶體驗不友好。所以我們需要美化滾動條。

　　美化滾動條最簡單的方式就是使用jquery插件，本文介紹的就是jquery插件中的滾動條插件nanoscroller.

　　官方展示,樣式可自定義

　　1.nanoscroller插件功能

　　對內容實現滾動功能

　　2.nanoscroller官方地址

　　http://jamesflorentino.github.io/nanoScrollerJS/

　　3.nanoscroller使用方法

　　1.引用文件

　　?

1 2 3 <script type="text/javascript" src="jquery-1.9.1.js"></script> <script type="text/javascript" src="jquery.nanoscroller.js"></script> <link rel="stylesheet" href="nanoscroller.css">

　　2.定義滾動條樣式

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 .nano { background: #bba; width: 500px; height: 500px; font-size:12px;font-family:微軟雅黑;border-radius:8px; } .nano .content { padding: 20px; } .nano .pane { background: #555; width: 8px; right: 1px; margin: 5px; } .nano .slider { background: #111; }

　　3.滾動顯示的內容

　　?

1 2 3 4 5 <div id="about" class="nano"> <div class="content"> 滾動顯示的內容 </div> </div>

　　以上所述就是本文的全部內容了，希望大家能夠喜歡。