一、需求：

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

二、他山之石：

案例来自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. ThreadLocal对象使用过程中容易陷入的坑

    ThreadLocal对象帮助我们管理线程内的对象,保证对象在线程之间是相互隔离的. 今天碰到的坑是这样的: index01.html页面加载的时候会发送一次a请求,然后点击附件上传的时候会发送上传请 ...

  2. Excel数据导入数据库的SQL快速生成

    =CONCATENATE("insert into table_name(id, code, name, remark) values (uuid(),'",B2,"', ...

  3. listview嵌套gridview，并实现grid元素部分显示以及点击展开与折叠

    原文链接:http://blog.csdn.net/duguju/article/details/49538341 有时我们需要用GridView显示目录列表,有时甚至是二级的,即listview每一 ...

  4. Oracle EBS - PO Approval

    PO Approval Except Standard Flow: 1. Personal setting

  5. C#使用HttpWebRequest 进行请求，提示 基础连接已经关闭: 发送时发生错误。

    本人今天遇到的错误,C#使用HttpWebRequest 进行请求,提示 基础连接已经关闭: 发送时发生错误. 测试了很久,才发现,是安全协议问题,把安全协议加上就可以了

  6. SharePoint 2010 Survey的Export to Spreadsheet功能怎么不见了？

    背景信息: 最近用户报了一个问题,说他创建的Survey里将结果导出成Excel文件(Export to spreadsheet)的按钮不见了. 原因排查: 正常情况下,这个功能只存在于SharePo ...

  7. C语言中的插入排序（2016-12-30）

    直接插入排序: 算法思想:假设待排序的记录存放在数组R[1--n]中,初始时,i=1,R[1]自成一个有序区,无序区为R[2--n].然后从i=2起直到i=n,依次将R[i]插入当前的有序区R[1.. ...

  8. LB 负载均衡的层次结构

    作为后端应用的开发者,我们经常开发.调试.测试完我们的应用并发布到生产环境,用户就可以直接访问到我们的应用了.但对于互联网应用,在你的应用和用户之间还隔着一层低调的或厚或薄的负载均衡层软件,它们不显山 ...

  9. .Net 跨平台可移植类库正在进行

    [原文发表地址] Cross-Platform Portable Class Libraries with .NET are Happening [译文发表地址] .Net 跨平台可移植类库正在进行 ...

  10. CI-持续集成（1）-软件工业“流水线”概述

    CI-持续集成(1)-软件工业“流水线”概述 1   概述 持续集成(Continuous integration)是一种软件开发实践,即团队开发成员经常集成它们的工作,通过每个成员每天至少集成一次, ...