超棒的自定义超酷滚动条jQuery插件 - Perfect Scrollbar
可能大家厌倦了千篇一律的页面滚动条,如果你希望能够设计出与众不同的页面UI设计的话,Perfect ScrollBar可能就是你寻找的解决方案。
这个滚动条来自于一个个人项目,一个简单但是非常棒的滚动条设计。当然这里也有其它的解决方案,如果你有兴趣也可以阅读:
使用jQuery插件jScrollPane开发Mac OSX Lion风格的滚动条
一个仿Apple - OS X Lion操作系统风格的滚动条jQuery插件- lionbars
主要特性:
- 不需要修改任何的元素的css
- 滚动条不影响最初的页面布局设计
- 滚动条支持完整的自定义
- 滚动条的尺寸和位置会随着容器尺寸或者内容的变化而变化
- 依赖于jQuery和相关几个类库
- 不需要定义宽度和高度。它会固定在容器的右下
- 你可以修改任何滚动条的样式,不依赖于其它脚本
- 滚动条支持'update'方法。如果你需要修改滚动条的位置和大小,只需要调用这个方法即可
- 不使用'scrollTop'和'scrollLeft',不是用任何绝对定位
使用要求:
- 必须有一个内容元素
- 容器必须拥有一个'position'的CSS样式定义
- 滚动条的position必须是'absolute'
- scrollbar-x必须拥有一个bottom的样式定义,scrollbar-必须有一个'right'的样式定义
如何使用:
HTML代码
<style> #Demo { position: 'relative'; } </style> <div id='Demo'> <div> ... </div> </div>
javascript
$('#Demo').perfectScrollbar();
如果容器大小或者位置变化了,调用如下方法即可:
$('#Demo').perfectScrollbar('update');
如果你需要销毁,调用如下:
$('#Demo').perfectScrollbar('destroy');
如果你需要滚动到某一个特定位置,调用如下:
$("#Demo").scrollTop(0);
$("#Demo").perfectScrollbar('update');
如果你需要支持鼠标滚轮支持,请包含这个插件: jquery-mousewheel,它能够帮助你添加鼠标滚轮支持。
超棒的自定义超酷滚动条jQuery插件 - Perfect Scrollbar的更多相关文章
- 自定义滚动条jQuery插件- Perfect Scrollbar
主要特性: 不需要修改任何的元素的css 滚动条不影响最初的页面布局设计 滚动条支持完整的自定义 滚动条的尺寸和位置会随着容器尺寸或者内容的变化而变化 依赖于jQuery和相关几个类库 不需要定义宽度 ...
- 16个非常酷的jQuery插件
摘要: 下面所有的插件有很大的功能,我相信大多数会帮助你即将到来的项目.借助他们可以使你的网站更加绚丽多彩. Lens Flare in JavaScript 这个jQuery插件可以帮助你处理图片, ...
- jquery 插件大全
1.jquery.roundabout.js 超棒的左右3D旋转式幻灯片jQuery插件 2.jquery validate.js 验证表单 3.jquery ui插件 对话框 日期 4.lhgdia ...
- 分享一款超棒的jQuery旋钮插件 - jQuery knob
转自:http://www.cnblogs.com/gbin1/archive/2012/05/08/2489908.html 在线演示 本地下载 如果你也在寻找一款生成漂亮旋钮(knob)的jQu ...
- 7 款超炫的 jQuery 插件
jQuery大大简化了我们的前端代码,因为jQuery的简单和开源,也涌现出了层出不穷的jQuery插件,这些实用的jQuery插件也不断推动着jQuery开源社区的发展.下面精选了几款让人跃跃欲试的 ...
- 如何创建一个自定义jQuery插件
简介 jQuery 库是专为加快 JavaScript 开发速度而设计的.通过简化编写 JavaScript 的方式,减少代码量.使用 jQuery 库时,您可能会发现您经常为一些常用函数重写相同的代 ...
- 推荐60个jQuery插件(转)
jQuery插件jQuery Spin Button自定义文本框数值自增或自减 jQuery插件JQuery Pager分页器实现javascript分页功能 jQuery插件FontSizer实现J ...
- 另外一款超棒的响应式布局jQuery插件 – Freetile.js
在线演示 我们曾经介绍过俩款知名的响应式布局插:isotope和masonary,今天我们这里再介绍一款相当不错的响应式布局插件 – Freetile.js,使用它同样可以生成超酷的动态布局效果.相信 ...
- jQuery超酷下拉插件6种效果演示
原始的下拉框很丑啦, 给大家一款jQuery超酷下拉插件6种效果 效果预览 下载地址 实例代码 <div class="container"> <section ...
随机推荐
- hdu_5813_Elegant Construction(xjb搞)
题目链接:hdu_5813_Elegant Construction 题意: 给你n个点,每个点要可以到达ai个点,可以直接可以间接,不能有环,问是否可行,如果可行就任选一种方式连接,并输出连接的边数 ...
- Python之迭代器&装饰器&生成器&正则
1.迭代器 迭代器是访问数据集合的一种方式,它只能从集合的第一个元素开始顺序访问,直到最后一个元素结束.类似于linux里的cat命令,只能挨行读取文本内容,不可以跳到中间或者尾部读取(不会把所有的数 ...
- 向openwrt 源码添加ap143支持
借鉴地址:http://www.pppei.net/blog/post/536 1.向文件 \target\linux\ar71xx\generic\profiles\atheros.mk 中添加ap ...
- .Net Core 上传图片
/// <summary> /// 图片上传并存入数据库 /// </summary> /// <returns></returns> public J ...
- [kuangbin带你飞]专题四 最短路练习 POJ 3268 Silver Cow Party
题意: 在一个有向图中求n头牛从自己的起点走到x再从x走回来的最远距离 思路一开始是暴力跑dij…… 讲道理不太可能…… 然后就百度了一下 才知道把矩阵转置的话就只需要求两次x的单源最短路…… /* ...
- Gentoo解决Windows双系统时间不同步的问题
升级后的gentoo不再使用/etc/conf.d/clock,而是使用/etc/conf.d/hwclock来设置和时间相关了. 在/etc/conf.d/hwclock文件中设置系统时间为本地时间 ...
- 关于ios 程序加载百度地图lib,出现链接错误:找不到符号 (null): _OBJC_CLASS_$_BMKMapManager的解决办法
报告的错误信息 ld: warning: ignoring file /Users/5012/Documents/sphuang/IOS_project/baidu_map/ShareLocation ...
- ajax 假上传文件
1. <form name="certForm" id="certForm" method="post" action="x ...
- Servlet、Filter、Listener、Interceptor基础
第一:Servlet Servlet是个接口,全限定名是javax.servlet.Servlet,在javax.servlet包中,在servlet-api.jar(在tomcat自带的lib文件夹 ...
- Codeforces Round 371 Div2 B.Passwords
原题: B. Passwords time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...