jQuery滚动条插件nanoscroller使用指南

 　　jQuery滚动条插件nanoscroller使用指南

         本文给大家介绍的nanoScrollerJS是一款使用简单方式实现 Mac OS X Lion 系统滚动条效果的jQuery插件。该滚动条插件利用原生的滚动条可以工作在 iPad、iPhone 和一些 Android Tablets上。

　　网站在展示信息时，如果信息量过大，解决方法主要有三种。1.分页，将信息分页显示。2.整页显示，但是页面过长，影响浏览体验。3.使用滚动条，而默认滚动条样式太单一，用户体验不友好。所以我们需要美化滚动条。

　　美化滚动条最简单的方式就是使用jquery插件，本文介绍的就是jquery插件中的滚动条插件nanoscroller.

　　官方展示,样式可自定义


　　1.nanoscroller插件功能

　　对内容实现滚动功能

　　2.nanoscroller官方地址

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

　　3.nanoscroller使用方法

　　1.引用文件

　　?

1
2
3

<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.定义滚动条样式

　　?

1
2
3
4
5
6
7
8
9
10
11
12
13

.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.滚动显示的内容

　　?

1
2
3
4
5

<div id="about" class="nano">
<div class="content">
滚动显示的内容
</div>
</div>

　　以上所述就是本文的全部内容了，希望大家能够喜欢。

时间： 2024-09-18 19:18:52

jQuery滚动条插件nanoscroller使用指南的相关文章

jQuery滚动条插件nanoscroller使用指南_jquery

网站在展示信息时,如果信息量过大,解决方法主要有三种.1.分页,将信息分页显示.2.整页显示,但是页面过长,影响浏览体验.3.使用滚动条,而默认滚动条样式太单一,用户体验不友好.所以我们需要美化滚动条. 美化滚动条最简单的方式就是使用jquery插件,本文介绍的就是jquery插件中的滚动条插件nanoscroller. 官方展示,样式可自定义 1.nanoscroller插件功能 对内容实现滚动功能 2.nanoscroller官方地址 http://jamesflorentino.githu

jQuery提示插件alertify使用指南

  jQuery提示插件alertify使用指南           alertifyjs是一个非侵入式,可定制的JavaScript通知组件.包括可定制的对话框,和右下角消息弹出框.完全可定制的警报,确认和提示对话框.完全自定义的通知系统.回调参数处理包括"确定"和"取消"按钮的点击.允许对话框排队 1.alertify插件功能 主要实现提示功能,用于代替js中的alert,confirm,prompt,显示友好的提示框 2.alertify使用方法 1.使用的文

jQuery菜单插件superfish使用指南

  jQuery菜单插件superfish使用指南          Superfish是一款Jquery插件,它能非常容易的建立复杂的多级下拉菜单,Superfish使用也非常普遍.你可能用Superfish实现多种菜单效果. Superfish的一些特点及效果: 使用纯Css实现动态效果,跨浏览器,支持最烂浏览器IE6 可设置下拉菜单在鼠标离开时自动隐藏时间.默认是800毫秒 支持淡入淡出动画 支持键盘响应 对含有子菜单的母菜单自动加入提示箭头 支持阴影效果,但需要有好的浏览器支持,如Fir

jquery滚动条插件（可以自定义）_jquery

以后用起来就方便了把 css文件引入 <link rel="stylesheet" type="text/css" href="css/jquery.mCustomScrollbar.css"> js引入 <script type="text/javascript" src="js/jquery.mCustomScrollbar.concat.min.js"></script&

jquery滚动条插件jScrollPane的使用介绍_jquery

这是一个js的页面滚动条插件 使用时引入三个文件:(路径自行填写) 复制代码 代码如下: <link type="text/css" href="路径/jquery.jscrollpane.css" rel="stylesheet" media="all" /> <script type="text/javascript" src="路径/jquery.mousewheel.js

jQuery验证插件validation使用指南

  jquery.validation.js在前端验证中使用起来非常方便,提供的功能基本上能满足大部分验证需求,下面我们就来仔细研究下这款jQuery插件的具体使用方法. 在网站开发过程中,有时我们需要验证用户输入的信息是否符合我们的要求,所以我们会对用户提交的数据进行验证.验证分两次进行,一次是在客户端,一次是在服务端.客户端的验证可以提升用户的体验. jquery验证插件有很多,实现的功能也基本相同.本文介绍的只是jquery验证插件中的一种jquery.validate jquery.Va

jQuery菜单插件superfish使用指南_jquery

下载地址:http://plugins.jquery.com/project/Superfish 文档说明:http://users.tpg.com.au/j_birch/plugins/superfish/ Superfish的一些特点及效果: 使用纯Css实现动态效果,跨浏览器,支持最烂浏览器IE6 可设置下拉菜单在鼠标离开时自动隐藏时间.默认是800毫秒 支持淡入淡出动画 支持键盘响应 对含有子菜单的母菜单自动加入提示箭头 支持阴影效果,但需要有好的浏览器支持,如Firefox,chrom

jQuery提示插件alertify使用指南_jquery

1.alertify插件功能 主要实现提示功能,用于代替js中的alert,confirm,prompt,显示友好的提示框 2.alertify使用方法 1.使用的文件 主要使用三个文件,两个css(alertify.core.css,alertify.default.css),用于设置提示框的样式.一个js(alertify.min.js或alertify.js),用于实现提示框的功能. 2.实现提示框代码 alertify使用非常简单,主要步骤为:初始化(初始化alertify)->绑定(绑

jQuery背景插件backstretch使用指南

  Backstretch是一款简单的jQuery插件,可以帮助你给网页添加一个动态的背景图片,可以自动调整大小适应屏幕的尺寸,当然这样做的缺点是当图片尺寸比屏幕小的时候,图片会因为自动延伸而变形,所以我们可以劲量使用高分辨率大尺寸的图片做背景,更重要的是支持图片的自动切换 一.backstretch插件功能 优化网站外观.主要用于设置页面背景图片,也可以设置html元素的背景图片.背景图片可以设置多张,在间隔时间内循环显示. 注 但是在设置背景图片时,如果图片过大,网站使用的资源又受到限制时,