码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript学习笔记- 自定义滚动条插件

时间:2016-09-13 11:36:59      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:

此滚动条仅支持竖向(Y轴)

一、Css

 1 /*这里是让用户鼠标在里面不能选中文字,避免拖动的时候出错*/
 2 body { -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /*早期浏览器*/ user-select: none; }
 3 
 4 /*滚动文本及滚动条大框*/
 5 .scroll_con { width: 500px; height: 500px; background-color: #5c0af7; position: relative; overflow-y: hidden; }
 6 
 7 /*滚动文本*/
 8 .scroll_text { width: 480px; font-size: 14px; word-break: break-word; color: #ffffff; position: absolute; left: 0; top: 0; }
 9 
10 /*滚动条整体框*/
11 .scroll { height: 500px; background-color: #2e03c4; position: absolute; left: 486px; top: 0; }
12 .scroll,.scroll .scroll_cen, .scroll .scroll_up, .scroll .scroll_down { width: 14px; }
13 /*滚轮上下按钮*/
14 .scroll .scroll_up, .scroll .scroll_down { height: 20px; line-height: 20px; background-color: #7263f8; color: #ffffff; font-size: 14px; font-weight: bold; text-align: center; }
15 .scroll .scroll_up:hover, .scroll .scroll_down:hover { background-color: #9da2f8; cursor: pointer; }
16 /*滚动滚动轨道*/
17 .scroll .scroll_cen { height: 460px; background-color: #2e03c4; position: relative; }
18 .scroll .scroll_cen .scroll_button { width: 12px; margin: 0px 1px; background-color: #7263f8; border-radius: 5px; position: absolute; cursor: pointer; }

 

二、Html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title></title>
 6     <meta charset="utf-8" />
 7     <script src="/jquery-1.10.2.js"></script>
 8     <script src="/mousewheel.js"></script>
 9     <script src="/scroll.js"></script>
10 </head>
11 
12 <body>
13     <div class="scroll_con">
14         <div class="scroll_text">
15            你需要放在滚动条可滑动区域的文本
16         </div>
17     </div>
18 
19     <script type="text/javascript">
20         //滚动条方法调用,括号里的数字为滑动速度
21         $(".scroll_con").LeonaScroll(50);
22     </script>
23 
24 </body>
25 </html>

三、Js

 1 $.fn.extend({
 2     LeonaScroll: function (speed) {
 3         return this.each(function () {
 4             var elem = $(this);
 5             var celem = $(this).find(".scroll_text");
 6             var index = $(this).index();
 7             //添加滚动条
 8             scrollHTML = "";
 9             scrollHTML += "<div class=‘scroll_up leonaup" + index + "‘>∧</div>";
10             scrollHTML += "<div class=‘scroll_cen leonacen" + index + "‘><div class=‘scroll_button leonabutton" + index + "‘></div></div>";
11             scrollHTML += "<div class=‘scroll_down leonadown" + index + "‘>∨</div>";
12             $(elem).append("<div class=‘scroll leonas" + index + "‘> " + scrollHTML + "</div>");
13 
14             var text_hidden = $(elem).height(),
15                 text_show = $(celem).height(),
16                 scroll_b = $(".leonabutton" + index + ""),
17                 text_p = text_hidden / text_show,
18                 bH_max = $(".leonas" + index + " .leonacen" + index + "").height(),
19                 bH = text_p * bH_max;
20             if (text_p >= 1) $(".leonas" + index + "").css("display", "none"); else { $(".leonas" + index + "").css("display", "block"); scroll_b.css("height", bH + "px"); }
21 
22             //鼠标拖动div事件
23             var needMove = false, mouseY = 0;
24             scroll_b.mousedown(function (event) { needMove = true; var bH_Top = scroll_b.position().top; mouseY = event.pageY - bH_Top; });
25             $(document).mouseup(function (event) { needMove = false; });
26             $(document).mousemove(function (event) {
27                 if (needMove) {
28                     var sMouseY = event.pageY, bH_Top = sMouseY - mouseY, textY = bH_Top / bH_max * text_show;
29                     if (bH_Top <= 0) {
30                         scroll_b.css("top", 0);
31                         $(celem).css("top", 0);
32                         return;
33                     }
34                     if (bH_Top >= bH_max - bH) {
35                         scroll_b.css("top", bH_max - bH);
36                         $(celem).css("top", text_hidden - text_show);
37                         return;
38                     }
39                     scroll_b.css("top", bH_Top); $(celem).css("top", -textY);
40                 }
41                 return;
42             });
43 
44             function goGun(direction, timer) {
45                 bH_Top = scroll_b.position().top;
46                 var h = 0; h += speed;  //调节滑动速度
47                 if (direction == 1) { //up
48                     var Toping = bH_Top - h;
49                     if (bH_Top <= 0 || Toping <= 0) {
50                         scroll_b.css("top", 0);
51                         $(celem).css("top", 0);
52                         if (timer == 2) clearInterval(goThread);   //need timer
53                         return;
54                     }
55                     scroll_b.css("top", bH_Top - h);
56                 }
57                 if (direction == -1) { //down
58                     var Downing = bH_Top + h;
59                     if (bH_Top >= bH_max - bH || Downing >= bH_max - bH) {
60                         scroll_b.css("top", bH_max - bH);
61                         $(celem).css("top", text_hidden - text_show);
62                         if (timer == 2) clearInterval(goThread);   //need timer
63                         return;
64                     }
65                     scroll_b.css("top", bH_Top + h);
66                 }
67                 var textY = bH_Top / bH_max * text_show;
68                 $(celem).css("top", -textY);
69             }
70 
71             //上下微调按钮事件
72             function minTiao(minTB, d, t) {
73                 var goThread = "";
74                 minTB.mouseup(function () { clearInterval(goThread); });
75                 minTB.mousedown(function () {
76                     clearInterval(goThread);
77                     goThread = setInterval(function () { goGun(d, t); }, 300);
78                 });
79                 minTB.click(function () { goGun(d); });
80             }
81             minTiao($(".leonaup" + index + ""), 1, 2);
82             minTiao($(".leonadown" + index + ""), -1, 2);
83 
84             //滚轮事件
85             $(elem).bind("mousewheel", function (event, delta, deltaX, deltaY) {
86                 if (delta == 1) {
87                     goGun(1, 0);
88                     if (scroll_b.position().top != 0)
89                         return false;
90                 } if (delta == -1) {
91                     goGun(-1, 0);
92                     if (Math.ceil(scroll_b.position().top) != Math.ceil(bH_max - bH))
93                         return false;
94                 }
95             });
96         });
97     }
98 });

四、插件下载链接:http://share.weiyun.com/143696ddb7e1f11ad47b7782ed629cbb (密码:vrml)【内含压缩的js】

JavaScript学习笔记- 自定义滚动条插件

标签:

原文地址:http://www.cnblogs.com/leona-d/p/5867615.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!