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时显示上面的文字,移出时不显示.** ...
随机推荐
- session跟cookie的区别
这些都是基础知识,不过有必要做深入了解.先简单介绍一下. 二者的定义: 当你在浏览网站的时候,WEB 服务器会先送一小小资料放在你的计算机上,Cookie 会帮你在网站上所打的文字或是一些选择, 都纪 ...
- JS的面向对象编程一:封装
Javascript是一种基于对象的语言,但它又没有class.这在很长的一段时间里,对JS的面向对象编程的概念很模糊,在编程的时候时有用到,但要说个所以然,却说不出来,所以看了些书,又在网上查了些资 ...
- HTML Help WorkShop 创作、调用方法和技巧
一.在CHM 文件中所用到的弹出式菜单: 二.在HTML Help WorkShop 中不用显示的样式 (1).从右到右阅读顺序. (2).对话框 (3).滚动条在左边 (4).仅展开单个标题 ...
- 数据库中数据DELETE了怎样恢复
USE [BBDAS_FP_DATA] GO /****** Object: StoredProcedure [dbo].[Recover_Deleted_Data_Proc] Script Date ...
- 关于bootstrap和响应式布局
bootstrap导入 首先需要安装好插件 然后就是在代码器写导入代码 代码如下 <html lang="zh-CN"> <head> <meta c ...
- python文件读取
1.如何将一个“lessons.txt”文档一行行输出? myfile = file(‘lessons.txt’) for f in myfile.readlines(): print f myfil ...
- Code First开发系列之数据库迁移
返回<8天掌握EF的Code First开发>总目录 本篇目录 开启并运行迁移 使用迁移API 应用迁移 给已存在的数据库添加迁移 EF的其他功能 本章小结 自我测试 本系列的源码本人已托 ...
- ASP.Net MVC开发基础学习笔记:五、区域、模板页与WebAPI初步
一.区域—麻雀虽小,五脏俱全的迷你MVC项目 1.1 Area的兴起 为了方便大规模网站中的管理大量文件,在ASP.NET MVC 2.0版本中引入了一个新概念—区域(Area). 在项目上右击创建新 ...
- 在Github上搭建自己的博客(Windows平台)
折腾了好久,终于在Github上搭建了自己的博客.这里面总结一下过程希望对大家能有所帮助. Github建博优缺点 和 csdn,新浪,网易相比,在Github上可以自己实现功能 和阿里云,VPS相比 ...
- Module Zero概览
返回<Module Zero学习目录> 介绍 ABP框架的设计是独立于任何数据库模式的且尽可能地使用泛型.因此,它避开了一些要求数据存储的抽象和可选的概念(如审计日志,session管理和 ...