萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> jQuery滾動條插件nanoscroller使用指南

jQuery滾動條插件nanoscroller使用指南

   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>

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

copyright © 萬盛學電腦網 all rights reserved