超棒的自定义超酷滚动条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_5877_Weak Pair(离散+DFS+树状数组)
题目链接:hdu_5877_Weak Pair 题意: 给你一棵树,让你找有多少对满足那两个条件的weak pair 题解: 有人用Treap,我不会,然后我用树状数组+离散来替代Treap,用DFS ...
- 1、Spring概述
Java EE优缺点 我们都知道在2003年Spring兴起之前,企业普遍使用J2EE技术来开发企业级应用,为什么用J2EE呢?主要原因有以下几个: 1.Java本身的跨平台能力,可移植性强2.J2E ...
- DOS/VBS - 用 bat 批处理 实现自动telnet
一.VBS法 1. 建立一个tel.vbs脚本 '建立Shell对象 set sh=WScript.CreateObject("WScript.Shell") WScript.Sl ...
- BestCoder Round #85 A B C
本来没有写博客的打算,可是看完了题解感觉这三道题这么水,我却只做出来一道,实在不应该,还是写点东西吧…… A.sum 问题描述 给定一个数列,求是否存在连续子列和为m的倍数,存在输出YES,否则输出N ...
- 【FBA】SharePoint 2013自定义Providers在基于表单的身份验证(Forms-Based-Authentication)中的应用
//http://www.cnblogs.com/OceanEyes/p/custom-provider-in-sharepoint-2013-fba-authentication.html 由于项目 ...
- 查看mms UA/profile
查看彩信的UA/profile信息,当然可以通过打印log来看. 但还有一个比较简便的方法: 直接抓取一个MMS包,用网络包分析工具打开,找到承载该MMS信息的HTTP协议包即可查看:
- SSL+socket详解
转自:http://hengstart.iteye.com/blog/842529 一. SSL概述 SSL协议采用数字证书及数字签名进行双端实体认证,用非对称加密算法进行密钥协商,用对 ...
- photoshop的页面制作练习2
- Hibernate框架--对象的状态,缓存, 映射
回顾Hibernate第二天: 1. 一对多与多对一 2. 多对多 3. inverse/cascade 4. 关联关系的维护 一对多: <set name="映射的集合属性&quo ...
- 用xftp传送避免乱码问题
用xftp传送文件时,需要输入ip地址,可连通的端口号,采用sftp协议 输入数据库传送,属性binary,二进制 上传文件,图片中文名称正常显示等,需要该属性支持UTF-8