jQuery滾動(dòng)條插件nanoscroller使用指南

本文給大家介紹的nanoScrollerJS是一款使用簡(jiǎn)單方式實(shí)現(xiàn) Mac OS X Lion 系統(tǒng)滾動(dòng)條效果的jQuery插件。該滾動(dòng)條插件利用原生的滾動(dòng)條可以工作在 iPad、iPhone 和一些 Android Tablets上。

網(wǎng)站在展示信息時(shí)，如果信息量過(guò)大，解決方法主要有三種。1.分頁(yè)，將信息分頁(yè)顯示。2.整頁(yè)顯示，但是頁(yè)面過(guò)長(zhǎng)，影響瀏覽體驗(yàn)。3.使用滾動(dòng)條，而默認(rèn)滾動(dòng)條樣式太單一，用戶體驗(yàn)不友好。所以我們需要美化滾動(dòng)條。

美化滾動(dòng)條最簡(jiǎn)單的方式就是使用jquery插件，本文介紹的就是jquery插件中的滾動(dòng)條插件nanoscroller.

官方展示,樣式可自定義

1.nanoscroller插件功能

對(duì)內(nèi)容實(shí)現(xiàn)滾動(dòng)功能

2.nanoscroller官方地址

3.nanoscroller使用方法

1.引用文件

<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.定義滾動(dòng)條樣式

.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.滾動(dòng)顯示的內(nèi)容

<div id="about" class="nano">

<div class="content">

滾動(dòng)顯示的內(nèi)容

</div>

</div>

以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。

更多信息請(qǐng)查看IT技術(shù)專欄