滚动条效果的 jQuery 插件 nanoScrollerJS

码农软件 · 软件分类 · jQuery界面效果 · 2020-01-01 08:58:24

软件介绍

nanoScrollerJS 是一款使用简单方式实现 Mac OS X Lion 系统滚动条效果的 jQuery 插件。该滚动条插件使用最小的 HTML 结构.nano > .nano-content。其它的滚动条元素.pane > .nano-slider是在插件运行时动态加载的。该滚动条插件利用原生的滚动条可以工作在 iPad、iPhone 和一些 Android Tablets上。

使用方法

HTML结构

下面是该滚动条插件工作所必须的HTML结构:

<div id="about" class="nano">
    <div class="nano-content"> ... content here ...  </div>
</div>

nanonano-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();

本文地址:https://codercto.com/soft/d/22408.html

超级连接者:破解新互联时代的成功密码

超级连接者:破解新互联时代的成功密码

伊桑•祖克曼(ETHAN ZUCKERMAN) / 林玮、张晨 / 浙江人民出版社 / 2018-8-1 / CNY 72.90

● 我们生活在一个互联互通的世界,我们需要辩证地看待某些事件,发现隐藏在背后的真相。着眼当下,看清彼此之间的联系,而非凭空幻想未来世界联系之紧密。数字世界主义要求我们承担起责任,让隐藏的联系变成现实。 ● 我们对世界的看法是局限的、不完整的、带有偏见的。如果我们想要改变从这个广阔的世界所获取的信息,我们需要做出结构性的改变。 ● 建立联系是一种新的力量。无论是在国家层面、企业层面还是个......一起来看看 《超级连接者:破解新互联时代的成功密码》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具