jquery横向滚动条
时间:2022-05-15
本文章向大家介绍jquery横向滚动条,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
此代码献给wendy
由于工作太忙,下次再整理成插件调用,先记录下来,欢迎同学们提意见。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery 模拟横向滚动条</title>
<script type="text/javascript" src="http://mat1.gtimg.com/www/js/tcomment/jquery-1.6.2.min.js"></script>
<style>
/* 主体 */
#lk_scrollBox {width:600px; height:320px; border:1px solid black; position:relative; overflow:hidden; }
/* 滚动条 */
#lk_scrollbar {width:560px; height:20px; background:#CCC; position: absolute; left:20px; bottom:0;}
#lk_handle {width:20px; height:20px; background:red; position:absolute; cursor:pointer;left:0px}
/* 内容区 */
#lk_scrollInner { width:600px; height:320px; overflow:hidden; padding-bottom:20px;overflow-y:hidden;overflow-x:scroll}
#lk_scrollInner #lk_content{ width:1800px;}
#lk_scrollInner #lk_content div{ }
/* 开始、结束按钮 */
#lk_begin{ position:absolute; height:20px; width:20px; background:#666; left:-20px;}
#lk_end{ position:absolute; height:20px; width:20px; background:#666; right:-20px;}
table{ width:100%; border:2px solid #CCC }
table td{ border:1px solid #ccc; padding:10px}
</style>
</head>
<body>
<div id='lk_scrollBox'>
<div id="lk_scrollInner">
<div id="lk_content">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
</table>
</div>
</div>
<div id="lk_scrollbar">
<div id="lk_begin"></div>
<div id="lk_handle"></div>
<div id="lk_end"></div>
</div>
</div>
<script type="text/javascript">
//20131114 link by
jQuery(function(){
oParent=$('#lk_scrollbar');
oDiv1 = $('#lk_handle');
oDiv2 = $('#lk_scrollBox');
oDiv3 = $('#lk_scrollInner');
$begin = $('#lk_begin');
$end = $('#lk_end');
oDiv1.width(30);
setTimeout(function(){
reScrollBox()
},1000)
//
reScrollBox=function (){
maxW = oDiv3[0].scrollWidth;
minW =oDiv2.width();
scale = minW/maxW;
oDiv1.width(oParent.width()*scale+30);
}
//拖动事件方法
function moveDownSlide(l){
if(l<0){
l=0;
}else if(l > oParent.width()-oDiv1.width()){
l=oParent.width()-oDiv1.width();
}
oDiv1.css('left',l);
var scale=l/(oParent.width()-oDiv1.width());
oDiv3.scrollLeft((oDiv3[0].scrollWidth-oDiv2.width())*scale);
}
//鼠标滚轮事件
oDiv3.bind('scroll',function(){
var scale=(oDiv3[0].scrollWidth-oDiv2.width())/(oParent.width()-oDiv1.width());
var t = $(this).scrollLeft()/scale;
oDiv1.css('left',t)
});
//鼠标拖动事件
oDiv1[0].onmousedown=function (ev){
ev=ev||window.event;
var disX=ev.clientX - oDiv1.position().left;
document.onmousemove=function (ev){
ev=ev||window.event;
var l=ev.clientX-disX;
moveDownSlide(l);
};
document.onmouseup=function (){
document.onmousemove=null;
document.onmouseup=null;
};
$(document).bind('selectstart',function(ev){ // 防止页面内容被选中 IE
return false;
});
};
//键盘上下事件
$(window).keydown(function(ev){
var sLeft = oDiv3.scrollLeft();
var maxW = oDiv3[0].scrollWidth - oDiv3.width();
switch(ev.keyCode) {
case 37:
funLeft(sLeft - 50 > 0 ? sLeft - 50 : 0);
break;
case 39:
funLeft(sLeft + 50 < maxW ? sLeft + 50 : maxW);
break;
}
function funLeft(sLeft){
oDiv3.scrollLeft(sLeft)
var t = oDiv3.scrollLeft()*scale;
var maxT = oParent.width() - oDiv1.width();
oDiv1.css('left',(t < maxT ? t : maxT) );
}
})
$begin.click(function(){
moveDownSlide(0);
})
$end.click(function(){
moveDownSlide(1000);//1000为大于宽度的值
})
});
</script>
</body>
</html>
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 入门 | egg.js 入门之egg-jwt
- 3大利器推荐,帮你写出规范漂亮的python代码
- 【Docker】修改docker镜像存储的路径
- conda报错
- docker安装和使用
- JAVA-常量及常量池
- 解决哈希冲突的常用方法分析
- 03 Confluent_Kafka权威指南 第三章: Kafka 生产者:向kafka写消息
- kafka生产者和消费者的基本操作
- 05 Confluent_Kafka权威指南 第五章: kafka内部实现原理
- 关于leetcode第718题求长度最长的公共子数组的解析
- JAVA类加载过程&主动引用和被动引用
- 关于leetcode第56题合并重复区间的解析
- java-覆盖equals和hashcode方法
- java-单链表反转解法及分析