今天在完善“zblogphp视频站主题”這个模板的时候,需要美化滚动条。
一开始用css来美化,但是兼容性不太好,各个浏览器的写法都不一样,麻烦的很。后来网上搜索搜索找到這个JQ插件,使用后觉得效果还不错,借花献佛分享下。
插件介绍:
Nicescroll滚动条插件是一个非常强大的基于JQUERY的滚动条插件,不需要增加额外的css,几乎全浏览器兼容。ie6+,实现只需要一段代码,侵入性非常小,样式可完全自定义,支持触摸事件,可在触摸屏上使用。
官网地址:http://www.areaaperta.com/nicescroll/。
使用方法:
必须引用1.5以上版本的JQ库。
然后最简单的使用方法如下:
<script> $(document).ready(function() { $("#scroll_bd").niceScroll("#scroll_ul",boxzoom:true}); }); </script>
html文件:
<div id="scroll_bd"> <div id="scroll_ul"> <p>这是内容部分</p> </div> </div>
css部分,#scroll_bd设置下高度,设置溢出隐藏即可。
插件详细参数:
cursorcolor: "#424242", // 改变滚动条颜色,使用16进制颜色值 cursoropacitymin: 0, // 当滚动条是隐藏状态时改变透明度, 值范围 1 到 0 cursoropacitymax: 1, // 当滚动条是显示状态时改变透明度, 值范围 1 到 0 cursorwidth: "5px", // 滚动条的宽度,单位:便素 cursorborder: "1px solid #fff", // CSS方式定义滚动条边框 cursorborderradius: "5px", // 滚动条圆角(像素) zindex: "auto" | <number>, // 改变滚动条的DIV的z-index值 scrollspeed: 60, // 滚动速度 mousescrollstep: 40, // 鼠标滚轮的滚动速度 (像素) touchbehavior: false, // 激活拖拽滚动 hwacceleration: true, // 激活硬件加速 boxzoom: false, // 激活放大box的内容 dblclickzoom: true, // (仅当 boxzoom=true时有效)双击box时放大 gesturezoom: true, // (仅 boxzoom=true 和触屏设备时有效) 激活变焦当out/in(两个手指外张或收缩) grabcursorenabled: true // (仅当 touchbehavior=true) 显示“抓住”图标 display "grab" iconautohidemode: true, // 隐藏滚动条的方式, 可用的值: true | // 无滚动时隐藏"cursor" | // 隐藏false | // 不隐藏,"leave" | // 仅在指针离开内容时隐藏"hidden" | // 一直隐藏"scroll", // 仅在滚动时显示 background: "", // 轨道的背景颜色 iframeautoresize: true, // 在加载事件时自动重置iframe大小 cursorminheight: 32, // 设置滚动条的最小高度 (像素) preservenativescrolling: true, // 你可以用鼠标滚动可滚动区域的滚动条和增加鼠标滚轮事件 railoffset: false, // 可以使用top/left来修正位置 bouncescroll: false, // (only hw accell) 启用滚动跳跃的内容移动 spacebarenabled: true, // 当按下空格时使页面向下滚动 railpadding: { top: 0, right: 0, left: 0, bottom: 0 }, // 设置轨道的内间距 disableoutline: true, // 当选中一个使用 nicescroll的div时,chrome浏览器中禁用 outlinehorizrailenabled: true, // nicescroll可以管理水平滚动 railalign: right, // 对齐垂直轨道 railvalign: bottom, // 对齐水平轨道 enabletranslate3d: true, // nicescroll 可以使用CSS变型来滚动内容 enablemousewheel: true, // nicescroll可以管理鼠标滚轮事件 enablekeyboard: true, // nicescroll可以管理键盘事件 smoothscroll: true, // ease动画滚动 sensitiverail: true, // 单击轨道产生滚动 enablemouselockapi: true, // 可以用鼠标锁定API标题 (类似对象拖动) cursorfixedheight: false, // 修正光标的高度(像素) hidecursordelay: 400, // 设置滚动条淡出的延迟时间(毫秒) directionlockdeadzone: 6, // 设定死区,为激活方向锁定(像素) nativeparentscrolling: true, // 检测内容底部便于让父级滚动 enablescrollonselection: true, // 当选择文本时激活内容自动滚动 cursordragspeed: 0.3, // 设置拖拽的速度rtlmode: "auto", // DIV的水平滚动从左边开始 cursordragontouch: false, // 使用触屏模式来实现拖拽 oneaxismousemode: "auto", // 当只有水平滚动时可以用鼠标滚轮来滚动,如果设为false则不支持水平滚动,如果设为auto支持双轴滚动 scriptpath: "" // 为boxmode图片自定义路径 ("" => same script path) preventmultitouchscrolling: true // 防止多触点事件引发滚动
相关推荐
- zblogphp1.7版本完整安装包、在线安装包下载08-28
- 诈尸?dedecms发新版了!DedeCMSV6正式发布 dedecms最新版下载11-03
- 2020年 zblog1.6版本终于上线了03-26
- 唐朝“百搭会员中心”插件开源了 zblog会员插件下载地址03-03
- wordpress程序下载 wordpress程序网盘下载10-27
- 阿里巴巴全新免费可商用字体 阿里巴巴普惠体 附官方下载地址04-28
- 终于...zblog导航栏管理插件出来了!11-02
- emlog6.0正式版正式上线!emlog6.0正式版下载10-03
- emlog5.3.1正式版下载地址 emlog免费打包百度网盘下载08-16
- 比较推荐的js插件:swiper[swiper介绍、swiper下载]09-19
- zblogphp会员中心插件:用户中心03-27
- zblogasp1.8常用插件合集:ytcms1.8、xiaoyi_FirstIMG、 NOBIRDArticleSEO11-06
- zblog1.5正式发布:Z-BlogPHP 1.5 Zero Released!10-31
- JQ美化滚动条插件”Nicescroll.js“下载和用法04-24
- zblog的商城插件!ZCenter上架销售中03-27
- 响应式幻灯片js插件“bxSlider” bxSlider下载+参数说明11-17
欢迎 你 发表评论: 取消回复
- 最新文章
- 热文排行
- 最多评论
- 1天兴工作室zblog纯博客主题 vue3+小程序双版本03-19
- 2vue3项目引入vant报错的错误原因和解决办法03-12
- 3天兴工作室zblog百科主题 可搭配会员插件实现知识付费盈利03-06
- 4zblog怎么截取指定字数的摘要?zblog摘要自定义截取方法介绍02-29
- 5天兴工作室2023双11活动:五折优惠券大放送11-05
- 6腾讯云2023双11活动:2H2G3M轻量服务器88一年限新用户11-05
- 7新老同享 阿里云2023双11活动:2核2G3M带宽云服务器99元/年!10-31
- 8天兴工作室zblog免登录付费阅读插件 支持支付宝微信支付虎皮椒支付10-09
- 9[已下线] 天兴工作室2023双节活动:五折优惠券09-29
- 标签聚合
- ×1vue跨域×1cdn×1zblog添加分享按钮×1zblogphp1.5升级×1z-index×1问答模板×1唐世军主题×1方言×1ZCenter×1全新改版×1恬不知耻×1安装wordpress×1zblog个人用户×1自定义属性×1bxSlider参数×1案列×1手机端视频播放×1商城模板×1博客主题×1购买zblog主题
最新评论
-
天兴工作室
03-21对的,下个版本会修复 -
访客
03-20此模版多张并排图片,不管点哪张图,都显示第一张,且没有轮播按钮,只能手动关闭。 系统:win7+火狐浏览器 -
天兴工作室
01-19没听懂 你是要批量创建分类?这是插件的事情主题不会考虑的 -
访客
01-18分类一个一个设置太麻烦了。能不能在主题设置里添加对分类的设置。 -
天兴工作室
01-16没太理解你的需求,麻烦联系我们的在线qq2076496616提供订单号详细说明下需求