jquery-leonaScroll-1.1-自定义滚动条插件

【jquery-leonaScroll-1.1-自定义滚动条插件】的更多相关文章

javascript自定义滚动条插件，几行代码的事儿

在实际项目中,经常由于浏览器自带的滚动条样式太戳,而且在各个浏览器中显示不一样,所以我们不得不去实现自定义的滚动条,今天我就用最少的代码实现了一个自定义滚动条,代码量区区只有几十行,使用起来也非常方便. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title…

Jquery自定义滚动条插件

下载地址:http://files.cnblogs.com/files/LoveOrHate/jquery.nicescroll.min.js <script src="jquery.nicescroll.js"></script> $(document).ready( function() { $("html").niceScroll(); } ); var nice = false; $(document).ready( function…

JavaScript学习笔记- 自定义滚动条插件

此滚动条仅支持竖向(Y轴) 一.Css /*这里是让用户鼠标在里面不能选中文字,避免拖动的时候出错*/ body { -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /*早期浏览器*/ user-select: none; } /*滚动文本及滚动条大框*/ .scroll_con { w…

JavaScript-JQ实现自定义滚动条插件1.0

此滚动条仅支持竖向(Y轴) 一.Css /*这里是让用户鼠标在里面不能选中文字,避免拖动的时候出错*/ body { -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /*早期浏览器*/ user-select: none; } /*滚动文本及滚动条大框*/ .scroll_con { w…

自定义滚动条插件 mCustomScrollbar 使用介绍

引用有心的学士笔记 http://www.wufangbo.com/mcustomscrollbar/ http://www.jianshu.com/p/550466260856 官网地址 http://manos.malihu.gr/jquery-custom-content-scroller/…

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

如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScrollPane,大家见过的可能比较多,但是这个插件太过于古老而且功能不强大,效果在几年前非常不错,但是放在现在就不好说了.所以我选择了后者:mCustomScrollbar.下图是两者官方示例的简单对比: 本文就是介绍如何使用 mCustomScrollbar 这个插件,大部分的内容是翻译自 mCus…

jquery自定义滚动条鼠标移入或滚轮时显示鼠标离开或悬停超时时隐藏

一.需求: 我需要做一个多媒体播放页面,左侧为播放列表,右侧为播放器.为了避免系统滚动条把列表和播放器隔断开,左侧列表的滚动条需要自定义,并且滚动停止和鼠标离开时要隐藏掉. 二.他山之石: 案例来自http://www.17sucai.com/pins/426.html但是下载demo需要先注册,还要20积分.显然,这违背了互联网的共享精神,so,F12,load it. 分析源码,发现了一个强大灵活的插件,感谢开发者.插件:jquery.jscrollpane.min.js主页: http:/…

自定义滚动条 - mCustomScrollbar

项目中需要使用自定义滚动条,但是试用了很多都功能不够全,今天发现一个比较全而且用法很简单的 -- mCustomScrollbar http://manos.malihu.gr/jquery-custom-content-scroller/ 转自:http://www.wufangbo.com/mcustomscrollbar/ 关于 mCustomScrollbar mCustomScrollbar 是个基于 jQuery UI 的自定义滚动条插件,它可以让你灵活的通过 CSS 定义网页的滚动…

自定义滚动条mCustomScrollbar

mCustomScrollbar 是个基于 jQuery UI 的自定义滚动条插件,它可以让你灵活的通过 CSS 定义网页的滚动条,并且垂直和水平两个方向的滚动条都可以定义,它通过 Brandon Aaron jquery mouse-wheel plugin 提供了鼠标滚动的支持,并且在滚动的过程中,还可以缓冲滚动使得滚动更加的平滑,还可以自动调整滚动条的位置和定义滚动到的位置等.(HTML必须存在于文档流, 不能为display:none) 1.如何使用 mCustomScrollbar(必…

自定义滚动条样式（jQuery插件、Webkit、IE）

-------------jQuery滚动条插件------------- http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html http://www.jsfoot.com/shouye/ue-design/ http://blog.sina.com.cn/s/blog_4abb9bba0101bgu7.html -------------webkit内核滚动条------------- webkit现在支持拥有overflow属性的区…

自定义滚动条jQuery插件- Perfect Scrollbar

主要特性: 不需要修改任何的元素的css 滚动条不影响最初的页面布局设计滚动条支持完整的自定义滚动条的尺寸和位置会随着容器尺寸或者内容的变化而变化依赖于jQuery和相关几个类库不需要定义宽度和高度.它会固定在容器的右下你可以修改任何滚动条的样式,不依赖于其它脚本滚动条支持'update'方法.如果你需要修改滚动条的位置和大小,只需要调用这个方法即可不使用'scrollTop'和'scrollLeft',不是用任何绝对定位使用要求: 必须有一个内容元素容器必须拥有一个'posi…

11 个最佳 jQuery 滚动条插件

通过jQuery滚动条插件,你可以换掉千篇一律的默认浏览器滚动条,让你的网站或web项目更具特色,更有吸引力.本文收集了11款非常漂亮.实用的jQuery滚动条插件,你可以轻松将它们应用在自己的网站中. 1. Windows:全屏窗口滚动插件该插件可以很好地实现全屏滚动,每滚动一次即为一屏.比如,用户浏览下一屏幕内容时,只需手动滚动到某一位置,该插件会自动滚动显示下一屏全部内容.对于浏览类似于PPT的内容时比较实用. 2. Jquery Scroll Follow:滚动跟随插件该插件可以…

原创新闻 11 个最佳 jQuery 滚动条插件

通过jQuery滚动条插件,你可以换掉千篇一律的默认浏览器滚动条,让你的网站或web项目更具特色,更有吸引力.本文收集了11款非常漂亮.实用的jQuery滚动条插件,你可以轻松将它们应用在自己的网站中. 1. Windows:全屏窗口滚动插件该插件可以很好地实现全屏滚动,每滚动一次即为一屏.比如,用户浏览下一屏幕内容时,只需手动滚动到某一位置,该插件会自动滚动显示下一屏全部内容.对于浏览类似于PPT的内容时比较实用. 2. Jquery Scroll Follow:滚动跟随插件该插件可以…

15个带示例的jQuery滚动条插件

1.NiceScroll:可用于桌面.移动与触摸设备的jQuery滚动插件 NiceScroll是一个jQuery插件(since 1.5),它有着类似于ios/移动设备的样式.它支持Div.iFrame.一个body的滚动条效果.适用于iOS设备. 在线演示| 下载 2.Lion样式jQuery滚动条:nanoScroller nanoScroller提供提供了一种简便的方式让你的网站拥有Mac OS X Lion样式的滚动条. 在线演示| 下载 3.jQuery自定义内容滚动自定义滚动插件…

网站开发常用jQuery插件总结(五)滚动条插件nanoscroller

网站在展示信息时,如果信息量过大,解决方法主要有三种.1.分页,将信息分页显示.2.整页显示,但是页面过长,影响浏览体验.3.使用滚动条,而默认滚动条样式太单一,用户体验不友好.所以我们需要美化滚动条. 美化滚动条最简单的方式就是使用jquery插件,本文介绍的就是jquery插件中的滚动条插件nanoscroller. 官方展示,样式可自定义 1.nanoscroller插件功能对内容实现滚动功能 2.nanoscroller官方地址 http://jamesflorentino.githu…

jQuery滚动条插件 – jquery.slimscroll.js

jquery.slimscroll.js插件是一个支持把内容放在一个盒子里面,固定一个高度,超出的则使用滚动.jquery.slimscroll.js不仅可以定义高度.宽度,还可以定义位置.滚动条大小.尺寸.颜色以及众多参数自定义,非常不错,推荐大家使用. 官网地址:https://github.com/kujian/jQuery-slimScrollCND:http://cdn.bootcss.com/jQuery-slimScroll/1.3.6/jquery.slimscroll.min.…

jQuery的Nicescroll滚动条插件使用方法

Nicescroll滚动条插件是一个非常强大的基于jQuery的滚动条插件,不需要增加额外的css,几乎全浏览器兼容.ie6+,实现只需要一段代码,侵入性非常小,样式可完全自定义,支持触摸事件,可在触摸屏上使用. Nicescroll官网地址:http://www.areaaperta.com/nicescroll/ 最简单的用法: $("html").niceScroll(); 隐藏滚动条: $("#mydiv").getNiceScroll().hide();…

使用css实现无滚动条滚动+使用插件自定义滚动条样式

使用css实现无滚动条滚动,摘抄自:曹小萌博客使用css实现无滚动条滚动,大体思路是在div外面再套一个div.这个div设置overflow:hidden.而内容div设置 overflow-x: hidden;overflow-y: scroll;然后再设置外层div的width小于内容div的width,就是用一个无滚动条的div包裹另一个有滚动条的div,从而实现隐藏滚动条的效果. 直接撸代码: <body> <div class="box_wrap">…

11 个最佳 jQuery 模拟滚动条插件 scrollbar

1. Windows:全屏窗口滚动插件该插件可以很好地实现全屏滚动,每滚动一次即为一屏.比如,用户浏览下一屏幕内容时,只需手动滚动到某一位置,该插件会自动滚动显示下一屏全部内容.对于浏览类似于PPT的内容时比较实用. 2. Jquery Scroll Follow:滚动跟随插件该插件可以使DOM对象随着页面的滚动而移动.你可以设置滚动的速度.偏移等参数. 3. 列表滚动插件该插件可以为任意列表添加上滚动效果.你可以自定义列表的滚动方向和滚动速度. 4. Sly:灵活的基于ITEM的…

jquery滚动条插件nanoscroller的应用

默认的滚动条的样式,各个版本的兼容性不是很好, 推荐一款jQuery 插件nanoscroller ,可以自定义滚动条的样式. 应用: 1.引入样式 nanoscroller.css <link rel="stylesheet" href="nanoscroller.css"> 在页面中自定义滚动条的样式自定义的样式如下图所示: 2.两个js文件,一个jQuery库,一个jquery.nanoscroller.js <script src=&qu…

Perfect Scrollbar – 完美的 jQuery 滚动条插件

Perfect Scrollbar 是一个很小的,但完美的 jQuery 滚动插件.滚动条不会影响原来的设计布局,滚动条的设计是完全可定制的.你可以改变几乎所有的 CSS 样式的滚动条,滚动条设计对脚本没有依赖性. 您可能感兴趣的相关文章创意无限!一组网页边栏过渡动画[附源码下载] 真是好东西!13种非常动感的页面加载动画效果你见过吗?9款超炫的复选框(Checkbox)效果 Magic CSS3 – 帮助你实现神奇的交互动画效果超赞!基于 Bootstrap 的响应式的后台管理模板立即…

炫酷JQUERY自定义对话框插件JDIALOG_JDIALOG弹出对话框和确认对话框插件

多种类型自定义对话框插件jDialog是一款基于jquery实现的轻量级多种类型的自定义对话框插件在项目开发中.一般会美化 alert(); 的样式.那么今天我就和大家分享一款非常炫的插件先来看一下程序最后的效果图片吧下面是HTMl代码 <center> <button id="test1">alert方式调用</button> <br/><br/> <button id="test2">…

使用jquery.mCustomScrollbar自定义滚动条（4）live使用，向未来元素添加滚动条，不实用，了解一下

.div_box元素是本来没有的,在滚动条初始化的时候方法是加在$('.content .div_box').mCustomScrollbar()上面,参数live:on; 点击按钮的时候,进行content里面添加div_box的,这时候滚动条初始化才开始在div_box元素上进行: 小结: $('.content .div_box').mCustomScrollbar()配合参数live:on向未来元素.div_box上加个滚动条方法,猜想是这时候是绑定了一个事件:在div_box被创建出来…

使用jquery.mCustomScrollbar自定义滚动条（3）callback onCreate

碰到了一个问题,想简洁,所以在页面上使用 <div class="div_box mCustomScrollbar" data-mcs-theme="dark-3">这种方式来初始化滚动条: 然后在$(fucntion(){})里面写div_box中添加内容append函数: 但是发现div_box中没有内容. 经分析是因为先执行了在div_box中append内容,而由于是要在div_box .mCSB_container下面添加内容的,但是这时候滚动…

使用jquery.mCustomScrollbar自定义滚动条（2）

参考博客:http://www.qianxingzhem.com/post-1602.html 接着上篇,另一个使用的例子,使用js来初始化滚动条,并且div中的内容可变化.需要调用相应的方法, 代码: <!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery版的自定义滚动条</title> <link rel="style…

使用jquery.mCustomScrollbar自定义滚动条（1）

参考博客:https://blog.csdn.net/cdnight/article/details/41351505 api网址:http://manos.malihu.gr/jquery-custom-content-scroller/# 常用的theme: dark light light-2 light-3 light-thick light-thin dark-thin inset inset-2" 3d 3d-dark 3d-thick minimal-dark 下面是最简单的使…

【jquery】jquery 自定义滚动条

可以自由的给滚动条定义背景,上下按钮,当然不仅仅是颜色,连图片当背景也可以.支持鼠标滚轮,点击滚动条滚轴定位,上下按钮久按加速,兼容 ie,firefox,chrome. 调用方法: $("#a").jscroll(); demo: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"/> <title>demo…

jQuery框架-3.jQuery自定义封装插件和第三方插件

一.jQuery的封装扩展 1.jQuery中extend方法使用 (挂在到jQuery和jQuery.fn两对象身上的使用) 1.1.官方文档定义: jQuery.extend Merge the contents of two or more objects together into the first object.把两个或者多个对象合并到第一个对象当中: jQuery.fn.extend Merge the contents of an object onto the jQue…

Javascript和jquery事件--滚动条事件和自定义滚动条事件样式

很想把滚动条事件跟鼠标滚轮事件放在一起,那就直接写在这一篇了.除了事件以外,对滚动条样式的调整也记在这里吧. 滚动条是浏览器的默认事件,使用overflow:auto/scroll都有可能出现,它的默认事件在各个浏览器大多一样,它的样式在各浏览器都有不同的表现.但是通过js我们可以阻止它的默认事件,使用css也可以在一定程度上更改它的样式.如果你不想要浏览器的滚动条,你可以通过监听鼠标滚轮事件以及使用动画(就像轮播图片那样)自定义事件,推荐js事件应用(带框拖拽.自定义滚动条),但是这里就不做深…

基于Jquery的textarea滚动条插件(原创)

之前项目中自己写的滚动条插件.先前太忙没有好好整理.现在项目间歇期拿出来整理后贴出来 Demo Here css 我是把mCustomScrollbar 的UI 扣下来的. 这里我要介绍下这个插件不错.可以满足日常使用 js 没有啥困难的demo中都有. 其中有一些关键方法我举出来 1:addStyle var addStyle = function($dom,addStyleObject) { var sStyle = $dom.attr('style'), aStyle = sStyle ?…