jQuery leonaScroll 1.1 自定义滚动条插件(推荐)


Posted in Javascript onSeptember 17, 2016

leonaScroll-1.1最新版

leonaScroll-1.1.js

欢迎使用leonaScroll-1.1.js,如您在使用过程中发现更多问题,欢迎指正!

更新:1.1版本

1、修复了前面初始版本中的一些bug,比如不能自适应用户的文本内容,css文件繁杂

2、用户只需调用一个方法即可使用该插件,无需按照原来的class类名去添加和定义你的滚动条文本域及外层元素,显得更为自由

3、增设了滚动条宽度、上下微调按钮高度,滚动文本区域的设置

4、增设了文本内容未超出时是否显示滚动条可选设置选项,如不设置,默认为不显示

5、增设了滚动文本宽度的可选设置选项,如不设置会自动为您适配到最佳宽度

使用方法:

1、建立好您的Html,引用jquery框架与mousewheel插件,及我们的leonaScroll-1.1.js插件

2、使用$("")..LeonaScroll({speed,scroll_text,sWidth,updownH})调用插件

3、属性说明:

speed 滚动速度,必须

scroll_text 滚动文本内容class,必须

sWidth 滚动条宽度,必须

updownH 上下微调按钮高度,必须

scrollbar 文本内容未超出时是否显示滚动条,显示为false,不显示为true,可选,默认为true

text_width 滚动文本宽度,可选

leonaScroll-1.0仅供学习参考使用,该版本为本人学习时思路版,尚有不足,新版本修复了很多问题,但仍然存在着二次调用问题。不过已经有了解决方案,只是本人比较赖,没有修复,等待1.2版本修复吧!哈哈!

当然如果有人使用后遇到bug或者不方便的地方,欢迎提出,以便本人继续改进。

学习之余写的小插件,如有什么不足之处,还望见谅。

最后感谢在本插件开发过程中,帮助和解答过我疑问的朋友。尤其感谢Delevin先生的大力解惑!

废话不说了,附js代码和下载地址

一、Html+Css

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script src="js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="js/mousewheel.js" type="text/javascript"></script>
<script src="js/leonaScroll-min-1.1.js" type="text/javascript"></script>
<style type="text/css">
.left,.Explain,.center,.welcome,.right,.usage{ height:300px;}
.left,.Explain,.Explain_text{ width:200px;}
.right,.usage,.usage_text{ width:700px;}
.center,.welcome,.welcome_text{ width:300px;}
.left,.right,.center{ padding:10px; padding-right:0; float:left; margin-right:10px; background-color: #cac9c9;}
.Explain_text,.welcome_text,.usage_text { font-size: 14px; line-height: 30px; background-color: #cac9c9; color: #000000; }
</style>
</head>
<body>
<div class="left">
<div class="Explain sss">
<div class="Explain_text">
leonaScroll-1.1.js
<br />介绍:是一款基于jquery框架,结合mousewheel插件实现的自定义滚动条
<br /><span style="color:red">(未超出可显示文本区域时,要求显示滚动条)</span>
</div>
</div>
</div>
<div class="center">
<div class="welcome">
<div class="welcome_text">
leonaScroll-1.1.js
<br />欢迎使用leonaScroll-1.1.js,如您在使用过程中发现更多问题,欢迎指正!
<br />作者:leona
<br />发布时间:2016-6-16
<br />博客:<a href="http://www.cnblogs.com/leona-d/">http://www.cnblogs.com/leona-d/</a>
<br /><span style="color:red">(未超出可显示文本区域时,默认不显示滚动条)</span>
</div>
</div>
</div>
<div class="right">
<div class="usage">
<div class="usage_text">
leonaScroll-1.1.js
<br />欢迎使用leonaScroll-1.1.js,如您在使用过程中发现更多问题,欢迎指正!
<br />更新:1.1版本
<br />1、修复了前面初始版本中的一些bug,比如不能自适应用户的文本内容,css文件繁杂
<br />2、用户只需调用一个方法即可使用该插件,无需按照原来的class类名去添加和定义你的滚动条文本域及外层元素,显得更为自由
<br />3、增设了滚动条宽度、上下微调按钮高度,滚动文本区域的设置
<br />4、增设了文本内容未超出时是否显示滚动条可选设置选项,如不设置,默认为不显示
<br />5、增设了滚动文本宽度的可选设置选项,如不设置会自动为您适配到最佳宽度
<br />使用方法:
<br />1、建立好您的Html,引用jquery框架与mousewheel插件,及我们的leonaScroll-1.1.js插件
<br />2、使用$("")..LeonaScroll({speed,scroll_text,sWidth,updownH})调用插件
<br />3、属性说明:
<br /> speed 滚动速度,必须
<br /> scroll_text 滚动文本内容class,必须
<br /> sWidth 滚动条宽度,必须
<br /> updownH 上下微调按钮高度,必须
<br /> scrollbar 文本内容未超出时是否显示滚动条,显示为false,不显示为true,可选,默认为true
<br /> text_width 滚动文本宽度,可选
</div>
</div>
</div>
<script type="text/javascript">
//滚动条调用方法
$(".Explain").LeonaScroll({ speed: 20, scroll_text: ".Explain_text", sWidth: 14, updownH: 20, scrollbar: false});
$(".welcome").LeonaScroll({ speed: 20, scroll_text: ".welcome_text", sWidth: 14, updownH: 20 });
$(".usage").LeonaScroll({ speed: 20, scroll_text: ".usage_text", sWidth: 14, updownH: 20 });
</script>
</body>
</html>

二、Jquery

$.fn.extend({
generateUUID: function () {
//唯一ID数值生成
var d = new Date().getTime();
var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = (d + Math.random() * 16) % 16 | 0; d = Math.floor(d / 16); return (c == 'x' ? r : (r & 0x7 | 0x8)).toString(16);
}); return uuid;
},
LeonaScroll: function (parameter) {
var Sname = $(this).selector;
return this.each(function () {
//变量声明
var elem = $(this), celem = $(this).find(parameter.scroll_text), index = $(this).generateUUID(), text_hidden = $(elem).height(), con_width = $(elem).width();
//添加滚动条Html
var scrollHTML = "";
scrollHTML += "<div class='scroll_up leonaup" + index + "'></div>";
scrollHTML += "<div class='scroll_cen leonacen" + index + "'><div class='scroll_button leonabutton" + index + "'></div></div>";
scrollHTML += "<div class='scroll_down leonadown" + index + "'></div>";
$(elem).append("<div class='scroll leonas" + index + "'> " + scrollHTML + "</div>");
//添加滚动条CSS
var scrollStyle = "";
scrollStyle += "body { -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /*早期浏览器*/ user-select: none; }";
scrollStyle += Sname + "{ position: relative; overflow-y: hidden; clear:none }";
scrollStyle += parameter.scroll_text + "{width:" + (parameter.text_width === undefined ? (con_width - parameter.sWidth) : parameter.text_width) + "px; word-break: break-word; position: absolute; left: 0; top: 0; clear:both; }";
scrollStyle += ".scroll { height:" + text_hidden + "px; float:right; }\r\n";
scrollStyle += ".scroll,.scroll .scroll_cen, .scroll .scroll_up, .scroll .scroll_down { width:" + parameter.sWidth + "px; }";
scrollStyle += ".scroll .scroll_up, .scroll .scroll_down {height:" + parameter.updownH + "px; line-height: " + parameter.updownH + "px; color: #ffffff; font-size: 12px; font-weight: bold; background-image:url(/img/bw.png); background-color:#161515; background-repeat:no-repeat; cursor: pointer;}";
scrollStyle += ".scroll .scroll_up{background-position: 0px 6px; border-radius:5px 5px 0 0; }";
scrollStyle += ".scroll .scroll_down{ background-position:0px -49px; border-radius:0 0 5px 5px; }";
scrollStyle += ".scroll .scroll_up:hover{background-position:0px -11px ; }";
scrollStyle += ".scroll .scroll_down:hover{background-position:0px -31px ; }";
scrollStyle += ".scroll .scroll_cen { height:" + (text_hidden - parameter.updownH * 2) + "px; background-color: #777676; position: relative; }";
scrollStyle += ".scroll .scroll_cen .scroll_button { width:" + (parameter.sWidth - 2) + "px; margin: 0px 1px; background:url(/img/tiao.jpg) repeat-y 0 0; border-radius: 5px; position: absolute; cursor: pointer; }";
$("head").append("<style type='text/css'>" + scrollStyle + "</style>");
//变量声明
var text_show = $(celem).height(), scroll_b = $(".leonabutton" + index + ""), text_p = text_hidden / text_show, bH_max = $(".leonas" + index + " .leonacen" + index + "").height(), bH = text_p * bH_max;
if (parameter.scrollbar == true || parameter.scrollbar === undefined) {
if (text_p >= 1) $(".leonas" + index + "").css("display", "none"); else { $(".leonas" + index + "").css("display", "block"); scroll_b.css("height", bH + "px"); }
} else return;

//鼠标拖动div事件
var needMove = false, mouseY = 0;
scroll_b.mousedown(function (event) { needMove = true; var bH_Top = scroll_b.position().top; mouseY = event.pageY - bH_Top; });
$(document).mouseup(function (event) { needMove = false; });
$(document).mousemove(function (event) {
if (needMove) {
var sMouseY = event.pageY, bH_Top = sMouseY - mouseY, textY = bH_Top / bH_max * text_show;
if (bH_Top <= 0) scroll_b.css("top", 0); $(celem).css("top", 0); return;
if (bH_Top >= bH_max - bH) scroll_b.css("top", bH_max - bH); $(celem).css("top", text_hidden - text_show); return;
scroll_b.css("top", bH_Top); $(celem).css("top", -textY);
} return;
});
//定义上下滚动规则
function goGun(direction, timer) {
bH_Top = scroll_b.position().top;
var h = 0; h += parameter.speed; //调节滑动速度
if (direction == 1) { //up
var Toping = bH_Top - h;
if (bH_Top <= 0 || Toping <= 0) {
scroll_b.css("top", 0); $(celem).css("top", 0);
if (timer == 2) clearInterval(goThread); //need timer
return;
}
scroll_b.css("top", bH_Top - h);
};
if (direction == -1) { //down
var Downing = bH_Top + h;
if (bH_Top >= bH_max - bH || Downing >= bH_max - bH) {
scroll_b.css("top", bH_max - bH);
$(celem).css("top", text_hidden - text_show);
if (timer == 2) clearInterval(goThread); //need timer
return;
}
scroll_b.css("top", bH_Top + h);
}
var textY = bH_Top / bH_max * text_show;
$(celem).css("top", -textY);
};
//上下微调按钮事件
function minTiao(minTB, d, t) {
var goThread = "";
minTB.mouseup(function () { clearInterval(goThread); });
minTB.mousedown(function () {
clearInterval(goThread);
goThread = setInterval(function () { goGun(d, t); }, 300);
});
minTB.click(function () { goGun(d); });
};
minTiao($(".leonaup" + index + ""), 1, 2);//up
minTiao($(".leonadown" + index + ""), -1, 2);//down
//滚轮事件
if (text_p < 1) {
$(elem).bind("mousewheel", function (event, delta, deltaX, deltaY) {
if (delta == 1) {//up
goGun(1, 0);
if (scroll_b.position().top != 0)
return false;
} if (delta == -1) {//down
goGun(-1, 0);
if (Math.ceil(scroll_b.position().top) != Math.ceil(bH_max - bH))
return false;
}
});
}
});
}
});

以上所述是小编给大家介绍的jQuery leonaScroll 1.1 自定义滚动条插件,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
Javascript中的var_dump函数实现代码
Sep 07 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
Jan 11 Javascript
js与jQuery 获取父窗、子窗的iframe
Dec 20 Javascript
一个很有趣3D球状标签云兼容IE8
Aug 22 Javascript
Node.js 的异步 IO 性能探讨
Oct 08 Javascript
Augularjs-起步详解
Jul 08 Javascript
Vue.js bootstrap前端实现分页和排序
Mar 10 Javascript
Vue filters过滤器的使用方法
Jul 14 Javascript
微信小程序通过保存图片分享到朋友圈功能
May 24 Javascript
微信小程序Echarts覆盖正常组件问题解决
Jul 13 Javascript
javascript的惯性运动实现代码实例
Sep 07 Javascript
Node.js API详解之 readline模块用法详解
May 22 Javascript
JavaScript每天必学之数组和对象部分
Sep 17 #Javascript
JavaScript每天必学之基础知识
Sep 17 #Javascript
jQuery判断是否存在滚动条的简单方法
Sep 17 #Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
Sep 17 #Javascript
利用JS提交表单的几种方法和验证(必看篇)
Sep 17 #Javascript
jQuery中常用动画效果函数(日常整理)
Sep 17 #Javascript
js方法数据验证的简单实例
Sep 17 #Javascript
You might like
雄兵连:天使彦天使彦为爱折翼,彦和炙心同时念动的誓言!
2020/03/02 国漫
php入门学习知识点七 PHP函数的基本应用
2011/07/14 PHP
php添加数据到xml文件的简单例子
2016/09/08 PHP
php 类中的常量、静态属性、非静态属性的区别
2017/04/09 PHP
Ext 今日学习总结
2010/09/19 Javascript
javascript一元操作符(递增、递减)使用示例
2013/08/07 Javascript
jquery右下角弹出提示框示例代码
2013/10/08 Javascript
jquery 中的each()跳出循环的语句
2014/05/23 Javascript
基于JS2Image实现圣诞树代码
2015/12/24 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
2016/07/27 Javascript
Javascript数组循环遍历之forEach详解
2016/11/07 Javascript
Bootstrap笔记—折叠实例代码
2017/03/13 Javascript
详解如何使用webpack在vue项目中写jsx语法
2017/11/08 Javascript
详解NodeJs开发微信公众号
2018/05/25 NodeJs
JS限制输入框输入的实现代码
2018/07/02 Javascript
JavaScript使用Math.random()生成简单的验证码
2019/01/21 Javascript
小程序hover-class点击态效果实现
2019/02/26 Javascript
详解javascript对数组和json数组的操作
2019/04/15 Javascript
Vuex实现购物车小功能
2020/08/17 Javascript
[02:16]DOTA2英雄基础教程 干扰者
2014/01/15 DOTA
Windows和Linux下使用Python访问SqlServer的方法介绍
2015/03/10 Python
Python导入oracle数据的方法
2015/07/10 Python
python 3.6 tkinter+urllib+json实现火车车次信息查询功能
2017/12/20 Python
详解python中asyncio模块
2018/03/03 Python
Python实现的凯撒密码算法示例
2018/04/12 Python
如何在Django中添加没有微秒的 DateTimeField 属性详解
2019/01/30 Python
使用Python中的reduce()函数求积的实例
2019/06/28 Python
使用PyTorch将文件夹下的图片分为训练集和验证集实例
2020/01/08 Python
解决Keras TensorFlow 混编中 trainable=False设置无效问题
2020/06/28 Python
美国知名奢侈美容品牌零售商:Cos Bar
2017/04/21 全球购物
经理秘书岗位职责
2013/11/14 职场文书
超市客服工作职责
2014/06/11 职场文书
2015双创工作总结
2015/07/24 职场文书
python绘制箱型图
2021/04/27 Python
TV动画《八十龟酱观察日记》第四季宣传PV公布
2022/04/06 日漫
MyBatis核心源码深度剖析SQL语句执行过程
2022/05/20 Java/Android