首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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 自定义滚动条插件，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

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

- Author -

Leona.d

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JS 时间显示效果代码
Aug 23 Javascript
JS高级拖动技术 setCapture，releaseCapture
Jul 31 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
Apr 26 Javascript
超简单JS二级、多级联动的简单实例
Feb 18 Javascript
三种动态加载js的jquery实例代码另附去除js方法
Apr 30 Javascript
JavaScript判断数组是否包含指定元素的方法
Jul 01 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
Mar 30 Javascript
学习Bootstrap滚动监听 附调用方法
Jul 02 Javascript
vue获取DOM元素并设置属性的两种实现方法
Sep 30 Javascript
在Vue项目中引入腾讯验证码服务的教程
Apr 03 Javascript
对layui中table组件工具栏的使用详解
Sep 19 Javascript
js中关于Blob对象的介绍与使用
Nov 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
RP-F11(1) 频偏(1) TOSHIBA(1) 灵敏度(1) 鉴频器(1) 高放电路(1) 数调机(1) 实习报告(1) 手调机(1) 频率(1)
You might like
广播爱好者需要了解的天线知识
2021/03/01 无线电
解析php中const与define的应用区别
2013/06/18 PHP
php中JSON的使用方法
2015/04/30 PHP
PHP常用的小程序代码段
2015/11/14 PHP
php ajax异步读取rss文档数据
2016/03/29 PHP
在Web项目中引入Jquery插件报错的完美解决方案(图解)
2016/09/19 Javascript
JavaScript中值类型和引用类型的区别
2017/02/23 Javascript
详解Vue2 无限级分类(添加,删除,修改)
2017/03/07 Javascript
Vue2.0用户权限控制解决方案的示例
2018/02/10 Javascript
jquery 实现拖动文件上传加载进度条功能
2018/03/18 jQuery
vue elementui 实现搜索栏公共组件封装的实例代码
2020/01/20 Javascript
利用js canvas实现五子棋游戏
2020/10/11 Javascript
js实现随机点名功能
2020/12/23 Javascript
[46:12]完美世界DOTA2联赛循环赛 DM vs Matador BO2第一场 11.04
2020/11/04 DOTA
python在windows和linux下获得本机本地ip地址方法小结
2015/03/20 Python
python通过openpyxl生成Excel文件的方法
2015/05/12 Python
Python内置数据结构与操作符的练习题集锦
2016/07/01 Python
Python利用heapq实现一个优先级队列的方法
2019/02/03 Python
pyqt 实现为长内容添加滑轮 scrollArea
2019/06/19 Python
Python 等分切分数据及规则命名的实例代码
2019/08/16 Python
Pycharm中安装Pygal并使用Pygal模拟掷骰子(推荐)
2020/04/08 Python
python 实现仿微信聊天时间格式化显示的代码
2020/04/17 Python
python连接mysql有哪些方法
2020/06/24 Python
Python用requests库爬取返回为空的解决办法
2021/02/21 Python
css3实例教程 一款纯css3实现的发光屏幕旋转特效
2014/12/07 HTML / CSS
用C语言实现文件读写操作
2013/10/27 面试题
幼儿园英语教学反思
2014/01/30 职场文书
销售员求职个人的自我评价
2014/02/19 职场文书
《月光启蒙》教学反思
2014/03/01 职场文书
桥梁工程专业求职信
2014/04/21 职场文书
药剂专业自荐书
2014/06/20 职场文书
毕业实习指导教师评语
2014/12/31 职场文书
电影小兵张嘎观后感
2015/06/03 职场文书
深入详解JS函数的柯里化
2021/06/09 Javascript
python中使用 unittest.TestCase单元测试的用例详解
2021/08/30 Python
在python中读取和写入CSV文件详情
2022/06/28 Python