JavaScript-JQ实现自定义滚动条插件1.0
此滚动条仅支持竖向（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-JQ实现自定义滚动条插件1.0的更多相关文章
- JavaScript学习笔记- 自定义滚动条插件
此滚动条仅支持竖向(Y轴) 一.Css /*这里是让用户鼠标在里面不能选中文字,避免拖动的时候出错*/ body { -moz-user-select: none; /*火狐*/ -webkit-us ...
- javascript自定义滚动条插件，几行代码的事儿
在实际项目中,经常由于浏览器自带的滚动条样式太戳,而且在各个浏览器中显示不一样,所以我们不得不去实现自定义的滚动条,今天我就用最少的代码实现了一个自定义滚动条,代码量区区只有几十行,使用起来也非常方便 ...
- javascript 学习之自定义滚动条加滚轮事件
要自己写一个自定义滚动条加上滚轮事件,之前的没有滚轮事件不完整,今天整理了一个. 1.滚轮事件是不兼容的,firefox中是必需要用事件绑定的添加,用的DOMMouseScroll,当滚动鼠标的时候, ...
- JavaScript学习笔记-自定义滚动条
这是一个基本实现思路,如果有新手和我一样没什么事,喜欢瞎研究话,可以参考下. 一.Html <div class="scroll_con"> <div class ...
- Jquery自定义滚动条插件
下载地址:http://files.cnblogs.com/files/LoveOrHate/jquery.nicescroll.min.js <script src="jquery. ...
- 自定义滚动条插件 mCustomScrollbar 使用介绍
引用有心的学士笔记 http://www.wufangbo.com/mcustomscrollbar/ http://www.jianshu.com/p/550466260856 官网地址 http: ...
- jQuery自定义滚动条样式插件mCustomScrollbar
如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...
- 自定义滚动条 - mCustomScrollbar
项目中需要使用自定义滚动条,但是试用了很多都功能不够全,今天发现一个比较全而且用法很简单的 -- mCustomScrollbar http://manos.malihu.gr/jquery-cust ...
- 自定义滚动条mCustomScrollbar
mCustomScrollbar 是个基于 jQuery UI 的自定义滚动条插件,它可以让你灵活的通过 CSS 定义网页的滚动条,并且垂直和水平两个方向的滚动条都可以定义,它通过 Brandon A ...
随机推荐
- Bitcoin 的基本原理
昨天读到了 Bitcoin 的中文介绍,觉得非常有意思.不过上面这篇文章解释的非常不靠谱,我花了一晚上去Bitcoin的官方网站 仔细研究了一下,总算理解了其原理.感觉非常有启发,尤其是对虚拟货币的流 ...
- C语言实现 计算个人所得税务2种方法
#include <stdio.h> #include <stdlib.h> /* 基于C语言的个人所得税计税系统 问题描述: 我国现行的个人所得税计算方法如下: 级数 全月应 ...
- C++【string】用法和例子
/*** * string 基础api复习 * 8 AUG 2018 */ #include <iostream> #include <string> using namesp ...
- js如何往数组Array中添加元素 (2013-09-04 10
unshift:将参数添加到原数组开头,并返回数组的长度 pop:删除原数组最后一项,并返回删除元素的值:如果数组为空则返回undefined push:将参数添加到原数组末尾,并返回数组的长度 co ...
- 编程之法：面试和算法心得（字符串包含java实现）
内容全部来自编程之法:面试和算法心得一书,实现是自己写的使用的是java 题目描述 给定两个分别由字母组成的字符串A和字符串B,字符串B的长度比字符串A短.请问,如何最快地判断字符串B中所有字母是否都 ...
- zimage 和bzimage 有什么区别
在网络中,不少服务器采用的是Linux系统.为了进一步提高服务器的性能,可能需要根据特定的硬件及需求重新编译Linux内核.编译Linux 内核,需要根据规定的步骤进行,编译内核过程中涉及到几个重要的 ...
- Android 开发 屏幕常亮的3个方法
第一种 xml文件中的顶层布局添加属性: android:keepScreenOn="true" 第二种 在Window设置flag: getWindow().addFlags(W ...
- 图解nginx配置负载均衡
1. 在Linux上准备两份tomcat 2. 修改两份tomcat的端口号 修改的端口如图所示: 3. 启动两个tomcat服务器 4. 修改两个服务器上的主页方便测试区分 5. 在nginx配置文 ...
- 最全Kubernetes审计日志方案
前言 当前Kubernetes(K8S)已经成为事实上的容器编排标准,大家关注的重点也不再是最新发布的功能.稳定性提升等,正如Kubernetes项目创始人和维护者谈到,Kubernetes已经不再是 ...
- QEventLoop配合QTimer实现阻塞任务超时处理
A阻塞主线程正常运行,需要做特殊处理. 以下代码可实现,A阻塞或者正常处理时,均不阻塞主线程正常处理. QEventLoop eventloop; // use point to manage eve ...