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 相关文章推荐
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
Mar 09 Javascript
javascript编程起步(第四课)
Jan 10 Javascript
JS网络游戏-(模拟城市webgame)提供的一些例子下载
Oct 14 Javascript
Extjs学习笔记之四 工具栏和菜单
Jan 07 Javascript
原生JavaScript生成GUID的实现示例
Sep 05 Javascript
js中获取时间new Date()的全面介绍
Jun 20 Javascript
JavaScript实现时间倒计时跳转(推荐)
Jun 28 Javascript
js的OOP继承实现(必看篇)
Feb 18 Javascript
详解VUE 数组更新
Dec 16 Javascript
vue.js input框之间赋值方法
Aug 24 Javascript
JavaScript中Array方法你该知道的正确打开方法
Sep 11 Javascript
vue前后分离调起微信支付
Jul 29 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
Search File Contents PHP 搜索目录文本内容的代码
2010/02/21 PHP
php中使用exec,system等函数调用系统命令的方法(不建议使用,可导致安全问题)
2012/09/07 PHP
php获取域名的google收录示例
2014/03/24 PHP
详解PHP导入导出CSV文件
2014/11/03 PHP
php清除和销毁session的方法分析
2015/03/19 PHP
PHP文件操作方法汇总
2015/07/01 PHP
[原创]php使用curl判断网页404(不存在)的方法
2016/06/23 PHP
关于使用runtimeStyle属性问题讨论文章
2007/03/08 Javascript
js判断IE6/IE7/FF的代码[XMLHttpRequest]
2011/02/16 Javascript
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
jQuery 常见操作实现方式和常用函数方法总结
2011/05/06 Javascript
javascript中为某个元素指定事件的三种方式
2014/08/07 Javascript
javascript异步编程代码书写规范Promise学习笔记
2015/02/11 Javascript
基于nodejs 的多页面爬虫实例代码
2017/05/31 NodeJs
AngularJS实现注册表单验证功能
2017/10/16 Javascript
基于 jQuery 实现键盘事件监听控件
2019/04/04 jQuery
angularjs请求数据的方法示例
2019/08/06 Javascript
使用setup.py安装python包和卸载python包的方法
2013/11/27 Python
python实现带验证码网站的自动登陆实现代码
2015/01/12 Python
在Mac OS上使用mod_wsgi连接Python与Apache服务器
2015/12/24 Python
Python实现一个Git日志统计分析的小工具
2017/12/14 Python
Ubuntu下使用Python实现游戏制作中的切分图片功能
2018/03/30 Python
在NumPy中创建空数组/矩阵的方法
2018/06/15 Python
python实现textrank关键词提取
2018/06/22 Python
对python numpy.array插入一行或一列的方法详解
2019/01/29 Python
python实现输入三角形边长自动作图求面积案例
2020/04/12 Python
Mankind美国/加拿大:英国领先的男士美容护发用品公司
2018/12/05 全球购物
Diesel美国网上商店:意大利牛仔时装品牌
2020/12/10 全球购物
文言文形式的学生求职信
2013/12/03 职场文书
CAD制图人员的自荐信
2014/02/07 职场文书
党风廉正建设个人工作总结
2015/03/06 职场文书
区域销售经理岗位职责
2015/04/02 职场文书
看雷锋电影观后感
2015/06/10 职场文书
升学宴祝酒词
2015/08/11 职场文书
mybatis使用oracle进行添加数据的方法
2021/04/27 Oracle
vue实现书本翻页动画效果实例详解
2022/04/08 Vue.js