一、需求:

我需要做一个多媒体播放页面,左侧为播放列表,右侧为播放器。为了避免系统滚动条把列表和播放器隔断开,左侧列表的滚动条需要自定义,并且滚动停止和鼠标离开时要隐藏掉。

二、他山之石:

案例来自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自定义滚动条 鼠标移入或滚轮时显示 鼠标离开或悬停超时时隐藏的更多相关文章

  1. jQuery自定义滚动条样式插件mCustomScrollbar

    如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...

  2. 【jquery】jquery 自定义滚动条

    可以自由的给滚动条定义背景,上下按钮,当然不仅仅是颜色,连图片当背景也可以.支持鼠标滚轮,点击滚动条滚轴定位,上下按钮久按加速,兼容 ie,firefox,chrome. 调用方法: $(" ...

  3. 转:zTree树控件key配置之title:zTree树节点名称过长如何省略显示且鼠标移入节点上能够显示全称

    当树节点的名称有些很长时,全部显示出来显得很拥挤的情况下,我们会想到用省略节点名称来代替,当鼠标移入节点时能够显示该节点的全称.这样我们应该如何做呢? 首先,我们要在树的节点内多增加一个属性用于设置该 ...

  4. Jquery自定义滚动条插件

    下载地址:http://files.cnblogs.com/files/LoveOrHate/jquery.nicescroll.min.js <script src="jquery. ...

  5. 利用Jquey.hover来实现 鼠标移入出现删除按钮,鼠标移出删除消失

    Html代码 <div class="box"><div class="bmbox" onclick="$('.box:first' ...

  6. php中bootstrap框架.popover弹出框,鼠标移动到上面自动显示,离开自动消失

    <div rel="name"></div> <script> $(function(){//显示弹出框 $("[rel=name]& ...

  7. 使用jQuery操作dom(追加和删除样式-鼠标移入移出)练习

    1.实现鼠标移入则添加背景色,鼠标移出则删除背景色 <!DOCTYPE html> <html> <head> <title>test1.html< ...

  8. # li鼠标移入移出,点击,变背景色,变checkbox选中状态

    移入移出背景色改变和点击背景色改变,两者是否相互覆盖? 若移出背景色恢复,影响点击事件的背景色改变,会产生效果为: 点击时,背景色改变,并且checkbox选中 鼠标移开后,checkbox仍选中,但 ...

  9. Qt 为QPushButton、QLabel添加鼠标移入移出事件

    QT 为QPushButton.QLabel添加鼠标移入移出事件**要实现的效果:**鼠标移入QPushButton时与移出时按钮变换字体颜色,鼠标移入QLabel时显示上面的文字,移出时不显示.** ...

随机推荐

  1. #iOS问题记录# 关于UITableViewcel的分割线去掉问题

    十分清楚的记得以前在使用的时候,通过[_mTableView setSeparatorStyle:UITableViewCellSeparatorStyleNone];这一句话来达到效果的. 这次怎么 ...

  2. Java_正则表达式

    1.简介 正则表达式是一串特定字符串,组成一个“规则字符串”,这个“规则字符串”是描述文本规则的工具.正则表达式就是记录文本规则的代码. 2.字符集合 [abc] a,b,c中任意一个字符 [^abc ...

  3. USACO翻译:USACO 2012 JAN三题(3)

    USACO 2012JAN(题目三) 一.题目概览 中文题目名称 放牧 登山 奶牛排队 英文题目名称 grazing climb lineup 可执行文件名 grazing climb lineup ...

  4. c#多线程介绍(上)

    转载原文:这里是链接内容 转载原文:这里写链接内容 转载原文:这里写链接内容 (重要事情说三遍) 引言 本文主要从线程的基础用法,CLR线程池当中工作者线程与I/O线程的开发,并行操作PLINQ等多个 ...

  5. 读取XML直接转换为类对象

    <?xml version="1.0" encoding="utf-8"?> <ArrayOfMenuItems xmlns:xsi=&quo ...

  6. SQL Server 2016 CTP2.2 的关键特性

    SQL Server 2016 CTP2.2 的关键特性 正如微软CEO 说的,SQL Server2016 是一个Breakthrough Flagship  Database(突破性的旗舰级数据库 ...

  7. CYQ.Data.Orm.DBFast 新增类介绍(含类的源码及新版本配置工具源码)

    前言: 以下功能在国庆期就完成并提前发布了,但到今天才有时间写文介绍,主要是国庆后还是选择就职了,悲催的是上班的地方全公司都能上网,唯独开发部竟不让上网,是个局域网. 也不是全不能上,房间里有三台能上 ...

  8. 多种坐标系之间的转换 Proj.NET和DotSpatial

    Proj.NET ( http://projnet.codeplex.com/)是一个.NET下开源的空间参照和投影引擎,遵循OGC相关标准.负责人(Coordinators )是D_Guidi 和S ...

  9. quick-cocos2d-x 2.2.3 rc版本中 crypto.md5file() 的C++实现在ANDROID上有BUG

    原来的版本是用fopen打开文件的,如果要从ANDROID的APK中取文件,直接就洗白了修改如下 void CCCrypto::MD5File(const char* path, unsigned c ...

  10. Python 学习文章收藏

    作者 标题 rollenholt Python修饰器的函数式编程 - Rollen Holt - 博客园 rollenholt python操作gmail - Rollen Holt - 博客园 ro ...