jQuery滾動條插件nanoscroller使用指南
本文給大家介紹的nanoScrollerJS是一款使用簡單方式實(shí)現(xiàn) Mac OS X Lion 系統(tǒng)滾動條效果的jQuery插件。該滾動條插件利用原生的滾動條可以工作在 iPad、iPhone 和一些 Android Tablets上。
網(wǎng)站在展示信息時(shí)，如果信息量過大，解決方法主要有三種。1.分頁，將信息分頁顯示。2.整頁顯示，但是頁面過長，影響瀏覽體驗(yàn)。3.使用滾動條，而默認(rèn)滾動條樣式太單一，用戶體驗(yàn)不友好。所以我們需要美化滾動條。
美化滾動條最簡單的方式就是使用jquery插件，本文介紹的就是jquery插件中的滾動條插件nanoscroller.
官方展示,樣式可自定義
1.nanoscroller插件功能
對內(nèi)容實(shí)現(xiàn)滾動功能
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.定義滾動條樣式
.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.滾動顯示的內(nèi)容
<div id="about">
<div>
滾動顯示的內(nèi)容
</div>
</div>
以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。