jquery自定义滚动条 鼠标移入或滚轮时显示 鼠标离开或悬停超时时隐藏
一、需求:
我需要做一个多媒体播放页面,左侧为播放列表,右侧为播放器。为了避免系统滚动条把列表和播放器隔断开,左侧列表的滚动条需要自定义,并且滚动停止和鼠标离开时要隐藏掉。
二、他山之石:
案例来自http://www.17sucai.com/pins/426.html
但是下载demo需要先注册,还要20积分。显然,这违背了互联网的共享精神,so,F12,load it。
分析源码,发现了一个强大灵活的插件,感谢开发者。
插件:jquery.jscrollpane.min.js
主页: http://jscrollpane.kelvinluck.com/。
API:http://jscrollpane.kelvinluck.com/api.html
三、代码分析:
jquery自定义滚动条 鼠标移入或滚轮时显示 鼠标离开或悬停超时时隐藏。此功能主要通过以下三个js和一个css来实现:
jquery.mousewheel.js——滚轮事件(mousewheel)
scroll-startstop.events.jquery.js——滚轮事件扩展(scrollstart、scrollstop)
jquery.jscrollpane.min.js——自定义滚动条
jquery.jscrollpane.hover.js——自定义滚动条扩展(hover时显示隐藏,此文件是我从页面中抽离出来的,详见下面我的demo)
jscrollpane.css——自定义滚动条样式
四、我的Demo
http://youryida.duapp.com/demo_front/jscrollpaneHover/index.html
jquery自定义滚动条 鼠标移入或滚轮时显示 鼠标离开或悬停超时时隐藏的更多相关文章
- jQuery自定义滚动条样式插件mCustomScrollbar
如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...
- 【jquery】jquery 自定义滚动条
可以自由的给滚动条定义背景,上下按钮,当然不仅仅是颜色,连图片当背景也可以.支持鼠标滚轮,点击滚动条滚轴定位,上下按钮久按加速,兼容 ie,firefox,chrome. 调用方法: $(" ...
- 转:zTree树控件key配置之title:zTree树节点名称过长如何省略显示且鼠标移入节点上能够显示全称
当树节点的名称有些很长时,全部显示出来显得很拥挤的情况下,我们会想到用省略节点名称来代替,当鼠标移入节点时能够显示该节点的全称.这样我们应该如何做呢? 首先,我们要在树的节点内多增加一个属性用于设置该 ...
- Jquery自定义滚动条插件
下载地址:http://files.cnblogs.com/files/LoveOrHate/jquery.nicescroll.min.js <script src="jquery. ...
- 利用Jquey.hover来实现 鼠标移入出现删除按钮,鼠标移出删除消失
Html代码 <div class="box"><div class="bmbox" onclick="$('.box:first' ...
- php中bootstrap框架.popover弹出框,鼠标移动到上面自动显示,离开自动消失
<div rel="name"></div> <script> $(function(){//显示弹出框 $("[rel=name]& ...
- 使用jQuery操作dom(追加和删除样式-鼠标移入移出)练习
1.实现鼠标移入则添加背景色,鼠标移出则删除背景色 <!DOCTYPE html> <html> <head> <title>test1.html< ...
- # li鼠标移入移出,点击,变背景色,变checkbox选中状态
移入移出背景色改变和点击背景色改变,两者是否相互覆盖? 若移出背景色恢复,影响点击事件的背景色改变,会产生效果为: 点击时,背景色改变,并且checkbox选中 鼠标移开后,checkbox仍选中,但 ...
- Qt 为QPushButton、QLabel添加鼠标移入移出事件
QT 为QPushButton.QLabel添加鼠标移入移出事件**要实现的效果:**鼠标移入QPushButton时与移出时按钮变换字体颜色,鼠标移入QLabel时显示上面的文字,移出时不显示.** ...
随机推荐
- java-PreparedStatement的用法
转自:http://www.cnblogs.com/raymond19840709/archive/2008/05/12/1192948.html PreparedStatement的用法 jdbc( ...
- Dexpress 中 grid的使用
grid 中加入checkbox Run desiger Columns ColumnEdit中选择checkbox 此时我们要在后台手动指定一个数据列如下代码: dtRebatesReport.Co ...
- angularjs内置指令 - form
form类 angular js对form表单进行了那些扩展 ①html原生form表单不允许嵌套,而angular封装之后的form可以进行嵌套 ②angular为form扩展了自动校验,和防止重复 ...
- pyserial 16进制显示与发送
pyserial 16进制显示与发送 http://www.centoscn.com/python/2013/0817/1320.html 十六进制显示的实质是把接收到的字符诸葛转换成其对应的ASCI ...
- 【二】jekyll 的使用
本系列有五篇:分别是 [一]Ubuntu14.04+Jekyll+Github Pages搭建静态博客:主要是安装方面 [二]jekyll 的使用 :主要是jekyll的配置 [三]Markdown+ ...
- VS快捷键总结(包括ReSharper)
Shift+Alt+Enter 全屏显示代码Ctrl+E 最近文件列表Ctrl+B 转到定义Ctrl+Alt+B 转到继承类或接口处Ctrl+U 转到基类Ctrl+D 复制当前行或选定的块(Dupli ...
- Webpack教程
打开链接:Webpack教程
- java多线程系类:JUC原子类:01之框架
本系列内容全部来自于http://www.cnblogs.com/skywang12345/p/3514589.html 特在此说明!!!!! 根据修改的数据类型,可以将JUC包中的原子操作类可以分为 ...
- 那些证书相关的玩意儿(SSL,X.509,PEM,DER,CRT,CER,KEY,CSR,P12等)
之前没接触过证书加密的话,对证书相关的这些概念真是感觉挺棘手的,因为一下子来了一大堆新名词,看起来像是另一个领域的东西,而不是我们所熟悉的编程领域的那些东西,起码我个人感觉如此,且很长时间都没怎么搞懂 ...
- 《HiWind企业快速开发框架实战》(0)目录及框架简介
<HiWind企业快速开发框架实战>(0)目录及框架简介 本系列主要介绍一款企业管理系统快速开发框架,该框架旨在快速完成企业管理系统,并实现易维护可移植的目标. 使用逐个系统模块进行编码的 ...