一、需求:

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

二、他山之石:

案例来自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. 带额外toggle()功能的jquery库

    <html><head><meta http-equiv="Content-Type" content="text/html;charset ...

  2. TreeView 使用方法:(在View.Details模式下)

    1.建立TreeView的標題         2.建立TreeView的Item         3.在TreeView的Item中的建立SubItem                  如果將各部 ...

  3. XMLHTTPRequest对象的创建与浏览器的兼容问题

    MLHttpRequest 对象是AJAX功能的核心,要开发AJAX程序必须从了解XMLHttpRequest 对象开始. 了解XMLHttpRequest 对象就先从创建XMLHttpRequest ...

  4. 实践.Net Core在Linux环境下的第一个Hello World

    基础环境和相关软件准备 1.CentOS7.1 64位系统(或者其他CentOS版本的64位系统) 2.WinSCP软件(主要是方便管理和编辑Linux系统的文件) 3.XShell软件(Window ...

  5. 微软借力.NET开源跨平台支持,布局物联网平台开发

    今天科技类最大的新闻,莫过于微软宣布.NET开发框架开源计划..NET 开源,集成 Clang 和 LLVM 并且自带 Android 模拟器,这意味着 Visual Studio 这个当下最好没有之 ...

  6. Azure PowerShell (12) 通过Azure PowerShell创建SSH登录的Linux VM

    <Windows Azure Platform 系列文章目录> 本章将介绍如何使用Azure PowerShell,创建SSH登录的Linux VM 前提要求: 1.安装Azure Pow ...

  7. JS实战 · 表格行颜色间隔显示,并在鼠标指定行上高亮显示

    思路: 1.获取所有行对象,将需要间隔颜色显示的行对象进行动态的className属性指定:      前提是:先定义好类选择器,就是说给行对象赋予name. 2.高亮用到两个事件:onmouseov ...

  8. 移动APP服务端设计开发注意要点

    2014年,移动APP的热度丝毫没有减退,怎么为您的移动端app设计良好的服务器端接口(API)呢? 下面谈谈我个人的一些想法. 2014年,移动APP的热度丝毫没有减退,并没有像桌面软件被WEB网站 ...

  9. Andrew Ng机器学习公开课笔记 -- 学习理论

    网易公开课,第9,10课 notes,http://cs229.stanford.edu/notes/cs229-notes4.pdf 这章要讨论的问题是,如何去评价和选择学习算法   Bias/va ...

  10. Java 循环中标签的作用

    continue和break可以改变循环的执行流程,但在多重循环中,这两条语句无法直接从内层循环跳转到外层循环.在C语言中,可以通过goto语句实现多重循环的跳转,但在非循环结构中使用goto语句会使 ...