滚动条插件---jquery.nicescroll.js 简单使用

// 引入下载好的js文件

<script src="./js/jquery.nicescroll.min.js"></script>

<script>

//因为在同一个页面有tab切换项都需要使用滚动条,遇到一个问题,就是在点击下一个切换项的时候,上一个切换项的滚动条不会立即消失,所以给每一个切换项设置点击效果,添加和删除类名。

//注意:如果没有给不同的切换项添加上类名的话,滚动条是不会显示的,所以在开始就要给他们添加上需要的类名,在点击的时候在去删除或者添加类名,这样就不会出现前面滚动条不会立即消失的问题了

$(‘.clickHu‘).click(function () {

$(‘#wrapper1‘).addClass(‘wrapper1‘)

$(‘#wrapper2‘).removeClass(‘wrapper2‘)

})

$(‘.clickP‘).click(function () {

$(‘#wrapper1‘).removeClass(‘wrapper1‘)

$(‘#wrapper2‘).addClass(‘wrapper2‘)

})

//设置滚动条

$(‘.wrapper1‘).niceScroll({

// 设置滚动条颜色

cursorcolor: "#2a72f5",

// 滚动条最大透明度

cursoropacitymax: 1,

//使光标拖动滚动像在台式电脑触摸设备 true滚动条拖动不可用

touchbehavior: false,

// 滚动条宽度

cursorwidth: "10px",

// 滚动条边框

cursorborder: "0",

// 滚动条圆角

cursorborderradius: "5px",

// 轨道背景色

background: "#bdbdbd",

// 隐藏滚动条的方式,可用的值:true|无滚动时隐藏,"cursor"|隐藏,false|不隐藏,"leave"|仅在指针离开内容时隐藏,"hidden"|一直隐藏,"scroll"|仅在滚动时显示

autohidemode: false

})

</script>

原文地址:https://www.cnblogs.com/lljun/p/11699827.html

时间: 2024-11-10 01:30:01

滚动条插件---jquery.nicescroll.js 简单使用的相关文章

【转载】jquery 滚动条插件jquery.slimscroll.js

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

针对模拟滚动条插件(jQuery.slimscroll.js)的修改

在开发过程中程序员总会碰到产品经理提出的各种稀奇古怪的需求,尽管有些需求很奇葩,但不得不说有些须有还是能指引我们不断的学习与进步,最近在工作中就碰到这种问题.需求是要求在各主流浏览器上使用自定义的滚动条样式,并且达到完美兼容,此篇博客记录自己的分析过程.此篇博客的源码可访问slimscroll 为了能使用自定义的滚动条样式并且能在各主流浏览器上兼容,首先想到的就是css定制滚动条的样式.于是在网上搜索了下发现确实有这样的css样式存在: ul::-webkit-scrollbar/*滚动条整体部

滚动条美化插件jquery.nicescroll

今天给大家介绍一个滚动条美化插件jquery.nicescroll,这个插件有以下一个主意事项: 1.兼容所有最新的桌面浏览器和旧版:Chrome,Firefox,Edge,IE8 +,Safari(win / mac),Opera 2.兼容移动设备:iPad / iPhone / iPod,Android 4 +,Blackberry手机和Playbook(WebWorks / Table OS),Windows Phone 8和10 3.兼容所有触摸设备:iPad,Android平板电脑,W

一个简单的页面弹窗插件 jquery.pageMsgFrame.js

页面弹窗是网站中常用的交互效果,它可以强提示网站的某些信息给用户,或者作用于某些信息的修改等等功能. 这几天在做一个项目的时候,就顺捎把这个插件写一下,栽棵树,自己乘凉吧. 原创博文,转载请注明出处:http://www.cnblogs.com/dereksunok/p/3724764.html html代码: 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5

jq滚动插件jquery.nicescroll+定位到底部

<pre name="code" class="html"><!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compat

基于jQuery的滚动条插件-jquery.jscrollbar

jquery.jscrollbar 是一个基于jQuery的滚动条插件,支持水平滚动条和垂直滚动条,支持鼠标键盘事件 主要功能 支持水平滚动条 支持垂直滚动条 自动判断水平滚动条和垂直滚动条是否显示 支持外部调用来滚动内容 支持滚动条部分样式自定义 支持键盘方向键控制 支持鼠标滚动(需要mousewheel插件) 支持滚动条显示位置设置(外部|悬浮) 支持手动更新界面 依赖的库 jQuery (http://jquery.com/) jquery.jqdrag (https://github.c

jQuery插件 -- 表单验证插件jquery.validate.js

最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的javascript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jquery插件之一,经过了全球范围内不同项目的验证,并得到了许多Web开发者的好评.作为一个标准的验证方法库,Validation拥有如下特点: 1.内置验证规则: 拥有必填.数字.Email.URL和信用卡号码等19类内置验证规则 2.自定义验证规则: 可以很方便地自定义验证规则 3.简单强大的验证

jquery.cycle.js简单用法实例

样式: a{text-decoration: none;} *{margin:0; padding:0;} /*容器设置*/ .player { width:216px; height:248px; background:url(http://i2.itc.cn/20120117/2cc0_da8f6c82_c8da_693d_7714_9533a013006a_3.jpg) no-repeat; background-color:#ede1d1; position:relative; padd

jQuery插件 -- 动态事件绑定插件jquery.livequery.js

http://blog.csdn.net/zzq58157383/article/details/7721974 动态事件绑定插件livequery, 可以利用它给相应的DOM元素注册事件或者触发回调函数.不仅当选择器匹配的元素会被绑定事件,而且后来通过JavaScript添加的元素都会被绑定事件.当元素不再和选择器匹配时,livequery会自动取消事件注册,使得开发者不再需要关注HTML元素的来源,只需要关注如何编写其绑定的事件即可 通过jQuery选择器选择一个DOM元素,livequer