jQuery滚动条插件nanoscroller使用指南


Posted in Javascript onApril 21, 2015

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

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

官方展示,样式可自定义

jQuery滚动条插件nanoscroller使用指南

1.nanoscroller插件功能

对内容实现滚动功能

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

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

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

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

Javascript 相关文章推荐
jquery 插件开发备注
Aug 27 Javascript
用JavaScript实现动画效果的方法
Jul 20 Javascript
jQuery中bind与live的用法及区别小结
Jan 27 Javascript
Egret引擎开发指南之创建项目
Sep 03 Javascript
JavaScript每天定时更换皮肤样式的方法
Jul 01 Javascript
基于jquery animate操作css样式属性小结
Nov 27 Javascript
jQuery插件Validate实现自定义表单验证
Jan 18 Javascript
JavaScript正则表达式简单实用实例
Jun 23 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
Jul 31 Javascript
javascript按钮禁用和启用的效果实例代码
Oct 29 Javascript
Bootstrap实现模态框效果
Sep 30 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
jQuery验证插件validation使用指南
Apr 21 #Javascript
jQuery拖拽插件gridster使用指南
Apr 21 #Javascript
jQuery弹出层插件Lightbox_me使用指南
Apr 21 #Javascript
jQuery提示插件alertify使用指南
Apr 21 #Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
Apr 20 #Javascript
Jquery遍历Json数据的方法
Apr 20 #Javascript
javascript判断变量是否有值的方法
Apr 20 #Javascript
You might like
PHP XML数据解析代码
2010/05/26 PHP
PHP获取一段文本显示点阵宽度和高度的方法
2015/03/12 PHP
PHP批量修改文件名称的方法分析
2017/02/27 PHP
javascript 获取元素位置的快速方法 getBoundingClientRect()
2009/11/26 Javascript
Javascript 键盘keyCode键码值表
2009/12/24 Javascript
jtable列中自定义button示例代码
2013/11/21 Javascript
采用call方式实现js继承
2014/05/20 Javascript
AngularJS中如何使用echart插件示例详解
2016/10/26 Javascript
详解使用fetch发送post请求时的参数处理
2017/04/05 Javascript
详解通过JSON数据使用VUE.JS
2017/05/26 Javascript
node.js中express-session配置项详解
2017/05/31 Javascript
简单的网页广告特效实例
2017/08/19 Javascript
PHP自动加载autoload和命名空间的应用小结
2017/12/01 Javascript
vue-cli开发环境实现跨域请求的方法
2018/04/07 Javascript
layui实现table加载的示例代码
2018/08/14 Javascript
JavaScript实现简单贪吃蛇效果
2020/03/09 Javascript
nginx部署多个vue项目的方法示例
2020/09/06 Javascript
[06:06]2018DOTA2亚洲邀请赛主赛事第四日战况回顾 全明星赛欢乐上演
2018/04/07 DOTA
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
python中sets模块的用法实例
2014/09/30 Python
Python中线程编程之threading模块的使用详解
2015/06/23 Python
Linux下为不同版本python安装第三方库
2016/08/31 Python
Python读取Word(.docx)正文信息的方法
2018/03/15 Python
python截取两个单词之间的内容方法
2018/12/25 Python
Django admin model 汉化显示文字的实现方法
2019/08/12 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
keras实现图像预处理并生成一个generator的案例
2020/06/17 Python
html5中svg canvas和图片之间相互转化思路代码
2014/01/24 HTML / CSS
Sneaker Studio捷克:购买运动鞋
2018/07/08 全球购物
司法局群众路线教育实践活动整改措施
2014/09/17 职场文书
2014年个人教学工作总结
2014/12/09 职场文书
中学教师师德师风承诺书
2015/04/28 职场文书
幼儿园校车安全责任书
2015/05/08 职场文书
幸福来敲门观后感
2015/06/04 职场文书
世界十大儿童漫画书排名,法国国宝漫画排第五,第二是轰动日本连环
2022/03/18 欧美动漫
nginx配置限速限流基于内置模块
2022/05/02 Servers