nanoScroller.js 介绍
nanoScroller.js是 一个 用简单 方法 做出类似Mac OS X风格卷轴的jQuery 插件 ,尽管目前没有在持续维护,但使用上相当简单且 支持 度高仍然是不错的选择。 ?该滚动条 插件 使用最小的html结构.nano > .nano-content。其它的滚动条元素.pane > .nano-slider是在 插件 运行时动态加载的。该滚动条 插件 利用原生的滚动条可以工作在 iPad、iPhone 和一些 Android Tablets上。
nanoScroller.js使用 方法
html结构:
下面是该滚动条 插件 工作所必须的html结构:
<div id="about" class="nano">
<div class="nano-content"> ... content here ... </div>
</div>
nano和nano-content的class 名称 可以通过 插件 参数来改变(改变后 插件 的css 文件 也要相应的改变)。
css样式
在html<header>中引入nanoscroller.css 文件 。
<link rel="stylesheet" href="nanoscroller.css">
你必须为容器指定 一个 宽度和高度,并为你的滚动条定制一些基本样式,例如:
.nano { background: #bba; width: 500px; height: 500px; }
.nano > .nano-content { padding: 10px; }
.nano > .nano-pane { background: #888; }
.nano > .nano-pane > .nano-slider { background: #111; }
JavaScript
在 页面 中引入jquery.nanoscroller.js 文件 。
<script type="text/JavaScript" src="js/jquery.nanoscroller.js"></script>
然后使用下面的 方法 调用 该滚动条 插件 ,html中所有带有.nano的DOM元素都会被应用上该 方法 :
$(".nano").nanoScroller();
网站地址 : http://jamesflorentino.github.io/nanoScrollerJS/
GitHub: https://github.com/jamesflorentino/nanoScrollerJS
网站描述: 一个 用简单 方法 做出类似Mac OS X风格卷轴的jQuery 插件
nanoScroller.js官方网站
官方网站: http://jamesflorentino.github.io/nanoScrollerJS/
如果觉得 网站内容还不错,欢迎将 网站 推荐给程序员好友。