这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
这篇文章主要介绍了 jQuery leonaScroll 1.1 自定义滚动条插件 (推荐) 的相关资料, 非常不错,具有参考借鉴价值,需要的朋友可以参考下
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 自定义滚动条插件,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
来源: http://www.phperz.com/article/17/0519/331816.html