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 函数调用的对象和方法
Jul 01 Javascript
Javascript图像处理思路及实现代码
Dec 25 Javascript
悬浮数字的实现案例
Feb 19 Javascript
借助javascript代码判断网页是静态还是伪静态
May 05 Javascript
javascript检测浏览器的缩放状态实现代码
Sep 28 Javascript
javascript实现数独解法
Mar 14 Javascript
JavaScript实现点击按钮字体放大、缩小
Feb 29 Javascript
学习AngularJs:Directive指令用法(完整版)
Apr 26 Javascript
JavaScript事件学习小结(一)事件流
Jun 09 Javascript
vue中各组件之间传递数据的方法示例
Jul 27 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
Aug 16 Javascript
浅谈React碰到v-if
Nov 04 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
第九节--绑定
2006/11/16 PHP
php cookie的操作实现代码(登录)
2010/12/29 PHP
Yii2实现多域名跨域同步登录退出
2017/02/04 PHP
PHP判断密码强度的方法详解
2017/05/26 PHP
JS中简单的实现像C#中using功能(有源码下载)
2007/01/09 Javascript
在vs2010中调试javascript代码方法
2011/02/11 Javascript
javascript的内存管理详解
2013/08/07 Javascript
用js判断输入是否为中文的函数
2014/03/10 Javascript
JavaScript调试工具汇总
2014/12/23 Javascript
CSS javascript 结合实现悬浮固定菜单效果
2015/08/23 Javascript
javascript数组去重小结
2016/03/07 Javascript
在AngularJS中使用jQuery的zTree插件的方法
2016/04/21 Javascript
老生常谈combobox和combotree模糊查询
2017/04/17 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
2017/05/26 Javascript
JS实现数组去重方法总结(六种方法)
2017/07/14 Javascript
如何理解Vue的render函数的具体用法
2017/08/30 Javascript
js实现HTML中Select二级联动的实例
2018/01/05 Javascript
js的Object.assign用法示例分析
2020/03/05 Javascript
JS画布动态实现黑客帝国背景效果
2020/11/08 Javascript
[03:23]我的刀塔你不可能这么可爱 第一期金萌萌的故事
2014/06/20 DOTA
简单介绍Python中的几种数据类型
2016/01/02 Python
Python中内置的日志模块logging用法详解
2016/07/12 Python
Python3 处理JSON的实例详解
2017/10/29 Python
基于Python socket的端口扫描程序实例代码
2018/02/09 Python
tensorflow: variable的值与variable.read_value()的值区别详解
2018/07/30 Python
Python3实现统计单词表中每个字母出现频率的方法示例
2019/01/28 Python
关于Python Tkinter Button控件command传参问题的解决方式
2020/03/04 Python
CSS3 Backgrounds属性相关介绍
2011/05/11 HTML / CSS
CSS3关于z-index不生效问题的解决
2020/02/19 HTML / CSS
美国知名户外用品畅销中心:Sierra Trading Post
2016/07/19 全球购物
成品仓管员岗位职责
2013/12/11 职场文书
物理专业本科生自荐信
2014/01/30 职场文书
2014年商场工作总结
2014/11/22 职场文书
2016年教师节感恩寄语
2015/12/04 职场文书
反腐倡廉心得体会2016
2016/01/13 职场文书
vue前端工程的搭建
2021/03/31 Vue.js