快捷導(dǎo)航

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

更新時(shí)間：2015年04月21日 10:36:41 投稿：hebedich

本文給大家介紹的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官方地址

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

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)容了，希望大家能夠喜歡。

您可能感興趣的文章:

相關(guān)文章

jQuery中extend函數(shù)簡(jiǎn)單用法示例
這篇文章主要介紹了jQuery中extend函數(shù)簡(jiǎn)單用法,結(jié)合實(shí)例形式簡(jiǎn)單分析了jQuery使用extend函數(shù)擴(kuò)展對(duì)象屬性的相關(guān)操作技巧,需要的朋友可以參考下
2017-10-10
jQuery LigerUI 使用教程表格篇(1)
ligerGrid是ligerui系列插件的核心控件，用戶可以快速地創(chuàng)建一個(gè)美觀,而且功能強(qiáng)大的表格,支持排序、分頁(yè)、多表頭、固定列等等
2012-01-01
詳解jquery validate實(shí)現(xiàn)表單驗(yàn)證（正則表達(dá)式）
本篇文章主要介紹了jquery validate實(shí)現(xiàn)表單驗(yàn)證（正則表達(dá)式），用戶填寫(xiě)表單時(shí)，可以快速地對(duì)用戶填寫(xiě)的數(shù)據(jù)進(jìn)行驗(yàn)證，并做出反饋。有興趣的可以了解一下。
2017-01-01
jQuery實(shí)現(xiàn)的進(jìn)度條效果
本文主要給大家介紹的是jQuery實(shí)現(xiàn)的進(jìn)度效果的實(shí)例代碼，其實(shí)現(xiàn)原理就是使用 Javascript 控制 SPAN CSS 的寬度（以及其他的樣式）有需要的小伙伴可以參考下。
2015-07-07
隨鼠標(biāo)上下滾動(dòng)的jquery代碼
隨鼠標(biāo)上下滾動(dòng)，在某些時(shí)候需要類似的效果，下面有個(gè)不錯(cuò)的示例可以實(shí)現(xiàn)此效果，需要的朋友可以參考下
2013-12-12
js 實(shí)現(xiàn)一些跨瀏覽器的事件方法詳解及實(shí)例
這篇文章主要介紹了js 實(shí)現(xiàn)一些跨瀏覽器的事件方法詳解及實(shí)例的相關(guān)資料,需要的朋友可以參考下
2016-10-10
jquery 設(shè)置style:display的方法
這篇文章主要介紹了jquery 設(shè)置style:display的方法,需要的朋友可以參考下
2015-01-01
最新最熱最實(shí)用的15個(gè)jQuery插件匯總
本文給大家匯總介紹了2015年7月最新發(fā)布的最熱最實(shí)用的15款jQuery插件，都有著非常炫酷的效果，十分的實(shí)用，這里推薦給大家。
2015-07-07
基于jquery的一個(gè)圖片hover的插件
很簡(jiǎn)單有趣的效果，邏輯很清楚，代碼也簡(jiǎn)單，是練手的好東東。
2010-04-04
jQuery Ajax 全局調(diào)用封裝實(shí)例代碼詳解
這篇文章主要介紹了jQuery Ajax 全局調(diào)用封裝實(shí)例代碼詳解的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-06-06