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时显示上面的文字,移出时不显示.** ...
随机推荐
- *POJ 1222 高斯消元
EXTENDED LIGHTS OUT Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 9612 Accepted: 62 ...
- Vuforia点击屏幕自动对焦,过滤UGUI的按钮
//点击屏幕自对对焦 #if UNITY_EDITOR )) #elif UNITY_ANDROID || UNITY_IPHONE && Input.GetTouch().phase ...
- 控制TextField的内容长度
参考如下代码(下例是控制设置交易密码,控制6位): - (void)viewWillAppear:(BOOL)animated { [super viewWillAppear:animated]; [ ...
- 输入框三种输入方式(selenium webdriver 干货)
在机票预定的页面,输入出发城市和到达城市输入框的时候, 发现直接使用sendkeys不好使, 大部分情况出现输入某城市后没有输入进去, 经过几天的研究,发现可以采取三种方式: 1. 先点击输入框,待弹 ...
- Jquery 系列(1) 基本认识
本系列Jquery所用测试Demo版本是<uncompressed,development jQuery 1.11.3> 最新的jquery包可以从官网下载请参照http://jquery ...
- Haskell 函数式编程快速入门【草】
什么是函数式编程 用常规编程语言中的函数指针.委托和Lambda表达式等概念来帮助理解(其实函数式编程就是Lambda演算延伸而来的编程范式). 函数式编程中函数可以被非常容易的定义和传递. Hask ...
- 如何识别一个字符串是否Json格式
前言: 距离上一篇文章,又过去一个多月了,近些时间,工作依旧很忙碌,除了管理方面的事,代码方面主要折腾三个事: 1:开发框架(一整套基于配置型的开发体系框架) 2:CYQ.Data 数据层框架(持续的 ...
- io.js入门(二)—— 所支持的ES6(上)
io.js的官网上有专门介绍其所支持的ES6特性的页面(点我查看),上面介绍到,相比nodeJS,io.js已从根本上支持了新版V8引擎上所支持的ES6特性,无需再添加任何运行时标志(如 --harm ...
- 多彩的Console打印新玩法
Chrome应该是每一个Web开发者必备的工具之一.它有而强大的Devtool,辅助我们的JavaScript调试,审视DOM元素,CSS即时修改等.以及它还有一个的庞大的插件系统,同时我们也可以很容 ...
- [译]Asp.net MVC 之 Contorllers(二)
URL路由模块 取代URL重写 路由请求 URL路由模块的内部结构 应用程序路由 URL模式和路由 定义应用程序路由 处理路由 路由处理程序 处理物理文件请求 防止路由定义的URL 属性路由 书接上回 ...