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 相关文章推荐
jquery live()重复绑定的解决方法介绍
Jan 03 Javascript
如何实现textarea里的不同文本显示不同颜色
Jan 20 Javascript
AngularJS中实现动画效果的方法
Jul 28 Javascript
利用纯JS实现像素逐渐显示的方法示例
Aug 14 Javascript
js实现canvas图片与img图片的相互转换的示例
Aug 31 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
Dec 07 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
node实现的爬虫功能示例
May 04 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
May 04 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
May 07 Javascript
浅谈发布订阅模式与观察者模式
Apr 09 Javascript
Layer+Echarts构建弹出层折线图的方法
Sep 25 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
MySql 按时间段查询数据方法(实例说明)
2008/11/02 PHP
在smarty中调用php内置函数的方法
2013/02/07 PHP
完美解决thinkphp唯一索引重复时出错的问题
2017/03/31 PHP
PHP+Redis 消息队列 实现高并发下注册人数统计的实例
2018/01/29 PHP
javascript显示隐藏层比较不错的方法分析
2008/09/30 Javascript
JavaScript基本编码模式小结
2012/05/23 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
2014/02/13 Javascript
js实现checkbox全选和反选示例
2014/05/01 Javascript
angular2使用简单介绍
2016/03/01 Javascript
JavaScript 是什么意思
2016/09/22 Javascript
JavaScript 字符串常用操作小结(非常实用)
2016/11/30 Javascript
微信小程序 input输入框详解及简单实例
2017/01/10 Javascript
jquery的 filter()方法使用教程
2018/03/22 jQuery
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
nodejs同步调用获取mysql数据时遇到的大坑
2019/03/02 NodeJs
微信小程序开发搜索功能实现(前端+后端+数据库)
2020/03/04 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
2020/04/17 Javascript
Vue解决移动端弹窗滚动穿透问题
2020/12/15 Vue.js
[01:30]我们共输赢 完美世界城市挑战赛开启全新赛季
2019/04/19 DOTA
Python中的列表生成式与生成器学习教程
2016/03/13 Python
Python使用遗传算法解决最大流问题
2018/01/29 Python
Python利用 utf-8-sig 编码格式解决写入 csv 文件乱码问题
2020/02/21 Python
Python实现子类调用父类的初始化实例
2020/03/12 Python
Django用户登录与注册系统的实现示例
2020/06/03 Python
H5离线存储Manifest原理及使用
2020/04/28 HTML / CSS
意大利奢侈品购物网站:Giglio
2018/01/05 全球购物
美丽的现代设计家具:2Modern
2018/07/26 全球购物
艺术设计专业个人求职信
2013/09/21 职场文书
《蜗牛》教学反思
2014/02/18 职场文书
物流专业求职信
2014/06/30 职场文书
领导班子四风问题对照检查材料
2014/09/27 职场文书
2014年幼儿园教师工作总结
2014/11/08 职场文书
员工加薪申请报告
2015/05/15 职场文书
最美乡村教师观后感
2015/06/11 职场文书
python批量更改目录名/文件名的方法
2021/04/18 Python
Jupyter Notebook 如何修改字体和大小以及更改字体样式
2021/06/03 Python