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

此滚动条仅支持竖向（Y轴）

一、Css

 /*这里是让用户鼠标在里面不能选中文字，避免拖动的时候出错*/

 body { -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /*早期浏览器*/ user-select: none; }

 /*滚动文本及滚动条大框*/

 .scroll_con { width: 500px; height: 500px; background-color: #5c0af7; position: relative; overflow-y: hidden; }

 /*滚动文本*/

 .scroll_text { width: 480px; font-size: 14px; word-break: break-word; color: #ffffff; position: absolute; left:; top:; }

 /*滚动条整体框*/

 .scroll { height: 500px; background-color: #2e03c4; position: absolute; left: 486px; top:; }

 .scroll，.scroll .scroll_cen, .scroll .scroll_up, .scroll .scroll_down { width: 14px; }

 /*滚轮上下按钮*/

 .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; }

 .scroll .scroll_up:hover, .scroll .scroll_down:hover { background-color: #9da2f8; cursor: pointer; }

 /*滚动滚动轨道*/

 .scroll .scroll_cen { height: 460px; background-color: #2e03c4; position: relative; }

 .scroll .scroll_cen .scroll_button { width: 12px; margin: 0px 1px; background-color: #7263f8; border-radius: 5px; position: absolute; cursor: pointer; }

二、Html

 <!DOCTYPE html>

 <html>

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title></title>

     <meta charset="utf-8" />

     <script src="/jquery-1.10.2.js"></script>

     <script src="/mousewheel.js"></script>

     <script src="/scroll.js"></script>

 </head>

 <body>

     <div class="scroll_con">

         <div class="scroll_text">

            你需要放在滚动条可滑动区域的文本

         </div>

     </div>

     <script type="text/javascript">

         //滚动条方法调用，括号里的数字为滑动速度

         $(".scroll_con").LeonaScroll(50);

     </script>

 </body>

 </html>

三、Js

 $.fn.extend({

     LeonaScroll: function (speed) {

         return this.each(function () {

             var elem = $(this);

             var celem = $(this).find(".scroll_text");

             var index = $(this).index();

             //添加滚动条

             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>");

             var text_hidden = $(elem).height(),

                 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 (text_p >= 1) $(".leonas" + index + "").css("display", "none"); else { $(".leonas" + index + "").css("display", "block"); scroll_b.css("height", bH + "px"); }

             //鼠标拖动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 += 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);

             minTiao($(".leonadown" + index + ""), -1, 2);

             //滚轮事件

             $(elem).bind("mousewheel", function (event, delta, deltaX, deltaY) {

                 if (delta == 1) {

                     goGun(1, 0);

                     if (scroll_b.position().top != 0)

                         return false;

                 } if (delta == -1) {

                     goGun(-1, 0);

                     if (Math.ceil(scroll_b.position().top) != Math.ceil(bH_max - bH))

                         return false;

                 }

             });

         });

     }

 });

四、插件下载链接：http://share.weiyun.com/2907af31e6427b83f7394014a62ca483 （密码：WBgr）【leonaScroll-1.0版本】

（此版本仅供学习，上有不足之处，敬请期待最新版本）

JavaScript学习笔记- 自定义滚动条插件的更多相关文章

JavaScript学习笔记-自定义滚动条
这是一个基本实现思路,如果有新手和我一样没什么事,喜欢瞎研究话,可以参考下. 一.Html <div class="scroll_con"> <div class ...
javascript 学习之自定义滚动条加滚轮事件
要自己写一个自定义滚动条加上滚轮事件,之前的没有滚轮事件不完整,今天整理了一个. 1.滚轮事件是不兼容的,firefox中是必需要用事件绑定的添加,用的DOMMouseScroll,当滚动鼠标的时候, ...
JavaScript学习笔记-自定义集合类
//集合类Set( ES6标准才有的类,目前兼容性较差)//自定义集合类:extend = function (o,p){ //定义一个复制对象属性的类函数 for(var x in p){ o[x] ...
javascript学习笔记(四) Number 数字类型
数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数 toExponential() 方法用科学 ...
JavaScript:学习笔记(2)——基本概念与数据类型
JavaScript:学习笔记(2)——基本概念与数据类型语法 1．区分大小写．Test 和 test 是完全不同的两个变量. 2．语句最好以分号结束,也就是说不以分号结束也可以．变量 1.JS的 ...
Java程序猿的JavaScript学习笔记（汇总文件夹）
最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...
Java程序猿的JavaScript学习笔记（8——jQuery选择器）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
Java程序猿JavaScript学习笔记（2——复制和继承财产）
计划和完成在这个例子中,音符的以下序列: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaSc ...
Java程序猿的JavaScript学习笔记（3——this/call/apply）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

随机推荐

mysql学习笔记(一)
my建表操作创建表 create Table <表名> ( 字段名1,数据类型 [列级约束] [默认值], 字段名2,数据类型 [列级约束] [默认值], ... [表级约束], [co ...
烂泥：通过binlog恢复mysql备份之前的数据
本文由秀依林枫提供友情赞助,首发于烂泥行天下. 上一篇文章,我们讲解了如何通过mysql的binlog日志恢复mysql数据库,文章连接为<烂泥:通过binlog恢复mysql数据库>.其 ...
Altium Designer 出现错误提示(警告)adding items to hidden net GND/VCC
一般出现这个提示,不是错误. 可以取消net 网格标号这样就不会报这个警告了. 还可以设置规则,不让它报告. 点击确定,但是再次打开工程时有得警告这个错误了.我想,还是取消NET标注.
[译] 企业级 OpenStack 的六大需求（第 2 部分）：开放架构和混合云兼容
全文包括三部分: 第一部分:API 高可用和管理以及安全模型第二部分:开放架构和混合云兼容第三部分:弹性架构和全球交付在本系列的第一部分,我介绍了企业级 OpenStack 的六大需求.现在,我 ...
清除MAC OS X上的流氓软件 - advance mac cleaner
自3721开天辟地以来,流氓软件从来就没有消停过,连MAC OS X都难逃流氓软件的骚扰. 近日,因为从SourceForge上下载了一个软件安装包,结果中招了——莫名其妙被安装了advance ma ...
[转]ASP.Net篇之Session与Cookie
本文转自:http://www.cnblogs.com/japanbbq/archive/2011/08/31/2160494.html Session: Session是“会话”的意思,然而,因为h ...
I am back-电商网站开发&jQuery
hi 之前有将近两周的时间没有更新,除了懒就是其他的事情耽误了.现在好了,回家了,虽然家里停水,外面又有积雪,天寒地冻的,但诸多不便,都比不过有点闲的好. 开搞每个学PHP的必经之路——电商网站的开发 ...
周五了啦啦啦啦-LAMP+PHP‘s OOP
hi 周五咯~~ 1.LAMP配置完结篇五.LAMP配置环境优化 5.4 虚拟主机工作原理 apache的虚拟主机.virtual-host 用不同的域名访问不同的目录——手动模拟dns 修改hos ...
大一上学期的一点小疑惑，代码验证ok
#include<iostream> using namespace std; class test { int *p; int pn; public: test(int n) { p = ...
C++ 之策略模式
1 会飞的鸭子 Duck 基类,包含两个成员函数 swim() 和 display():派生类 MallardDuck,RedheadDuck 和 RubberDuck,各自重写 display() ...

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

JavaScript学习笔记- 自定义滚动条插件的更多相关文章

随机推荐

热门专题