javascript动画系列第五篇——模拟滚动条
前面的话
当元素内容溢出元素尺寸范围时，会出现滚动条。但由于滚动条在各浏览器下表现不同，兼容性不好。所以，模拟滚动条也是很常见的应用。本文将详细介绍滚动条模拟
原理介绍
滚动条模拟实际上和元素模拟拖拽类似。仅仅通过范围限定，使元素只可以在单一方向上拖拽
<div id="box" style="height: 200px;width: 16px;background-color:#F5F5F5;border-radius:10px;box-shadow:inset 0 0 6px rgba(0,0,0,0.3);position:relative;">
<div id="test" style="height: 60px;width: 16px;background-color:#555;box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;position:absolute;"></div>
</div>
<script>
function addEvent(target,type,handler){
if(target.addEventListener){
target.addEventListener(type,handler,false);
}else{
target.attachEvent('on'+type,function(event){
return handler.call(target,event);
});
}
}
(function(){
var y0,y1,isMoving;
var ele = document.getElementById('test'); var mousedownHandler = function(e){
e = e || event;
y0 = ele.offsetTop;
y1 = e.clientY;
//按下鼠标时，表示正在运动
isMoving = true;
}
var mousemoveHandler = function(e){
//如果没有触发down事件，而直接触发move事件，则函数直接返回
if(!isMoving){
return;
}
e = e || event;
var y2 = e.clientY;
var Y = y0 + (y2 - y1);
if(Y < 0){Y = 0;}
var YMax = parseInt(ele.parentNode.clientHeight) - ele.offsetHeight;
if(Y > YMax){Y = YMax;}
ele.style.top = Y + 'px';
}
var mouseupHandler = function(e){
//鼠标抬起时，表示停止运动
isMoving = false;
//释放全局捕获
if(ele.releaseCapture){
ele.releaseCapture();
}
}
var preventDefaultHandler = function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
//IE8-浏览器阻止默认行为
if(ele.setCapture){
ele.setCapture();
}
}
addEvent(ele,'mousedown',mousedownHandler);
addEvent(ele,'mousedown',preventDefaultHandler);
addEvent(document,'mousemove',mousemoveHandler);
addEvent(document,'mouseup',mouseupHandler); })();
</script>
通过将上面代码封装成函数，可以实现横向和纵向两种滚动条
<div id="box1" style="height: 200px;width: 16px;background-color:#F5F5F5;border-radius:10px;box-shadow:inset 0 0 6px rgba(0,0,0,0.3);position:relative;">
<div id="test1" style="height: 60px;width: 16px;background-color:#555;box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;position:absolute;"></div>
</div>
<div id="box2" style="height: 16px;width: 200px;background-color:#F5F5F5;border-radius:10px;box-shadow:inset 0 0 6px rgba(0,0,0,0.3);position:relative;">
<div id="test2" style="height: 16px;width: 60px;background-color:#D62929;box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;position:absolute;"></div>
</div>
<script>
function addEvent(target,type,handler){
if(target.addEventListener){
target.addEventListener(type,handler,false);
}else{
target.attachEvent('on'+type,function(event){
return handler.call(target,event);
});
}
}
function scrollbar(ele,str){
var x0,x1,y0,y1,isMoving; var mousedownHandler = function(e){
e = e || event;
x0 = ele.offsetLeft;
y0 = ele.offsetTop;
x1 = e.clientX;
y1 = e.clientY;
//按下鼠标时，表示正在运动
isMoving = true;
}
var mousemoveHandler = function(e){
//如果没有触发down事件，而直接触发move事件，则函数直接返回
if(!isMoving){
return;
}
e = e || event;
if(str == 'x'){
var x2 = e.clientX;
var X = x0 + (x2 - x1);
if(X < 0){X = 0;}
var XMax = parseInt(ele.parentNode.clientWidth) - ele.offsetWidth;
if(X > XMax){X = XMax;}
ele.style.left = X + 'px';
}else{
var y2 = e.clientY;
var Y = y0 + (y2 - y1);
if(Y < 0){Y = 0;}
var YMax = parseInt(ele.parentNode.clientHeight) - ele.offsetHeight;
if(Y > YMax){Y = YMax;}
ele.style.top = Y + 'px';
} }
var mouseupHandler = function(e){
//鼠标抬起时，表示停止运动
isMoving = false;
//释放全局捕获
if(ele.releaseCapture){
ele.releaseCapture();
}
}
var preventDefaultHandler = function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
//IE8-浏览器阻止默认行为
if(ele.setCapture){
ele.setCapture();
}
}
addEvent(ele,'mousedown',mousedownHandler);
addEvent(ele,'mousedown',preventDefaultHandler);
addEvent(document,'mousemove',mousemoveHandler);
addEvent(document,'mouseup',mouseupHandler); }; scrollbar(test1);
scrollbar(test2,'x');
</script>
应用
下面来介绍通过滚动条实现的几个应用
数字加减
通过移动滚动条来实现数字的加减。比例关系为：
滚动条已移动距离/滚动条可移动距离= 数字当前值/数字最大值
<div id="box" style="height: 16px;width: 200px;display:inline-block;background-color:#F5F5F5;border-radius:10px;box-shadow:inset 0 0 6px rgba(0,0,0,0.3);position:relative;">
<div id="test" style="height: 16px;width: 60px;background-color:#D62929;box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;position:absolute;"></div>
</div>
<span id="result">0</span>
<script>
function addEvent(target,type,handler){
if(target.addEventListener){
target.addEventListener(type,handler,false);
}else{
target.attachEvent('on'+type,function(event){
return handler.call(target,event);
});
}
}
function scrollbar(ele,str,max){
var x0,x1,y0,y1,isMoving,radio; var mousedownHandler = function(e){
e = e || event;
x0 = ele.offsetLeft;
y0 = ele.offsetTop;
x1 = e.clientX;
y1 = e.clientY;
//按下鼠标时，表示正在运动
isMoving = true;
//x轴方向
if(str == 'x'){
ratio = max/(ele.parentNode.offsetWidth - ele.offsetWidth);
//否则为y轴方向
}else{
var disY = e.clientY - ele.offsetTop;
ratio =max/(ele.parentNode.offsetHeight - ele.offsetHeight);
}
}
var mousemoveHandler = function(e){
//如果没有触发down事件，而直接触发move事件，则函数直接返回
if(!isMoving){
return;
}
e = e || event;
if(str == 'x'){
var x2 = e.clientX;
var X = x0 + (x2 - x1);
if(X < 0){X = 0;}
var XMax = parseInt(ele.parentNode.clientWidth) - ele.offsetWidth;
if(X > XMax){X = XMax;}
ele.style.left = X + 'px';
result.innerHTML = Math.round(ratio * X);
}else{
var y2 = e.clientY;
var Y = y0 + (y2 - y1);
if(Y < 0){Y = 0;}
var YMax = parseInt(ele.parentNode.clientHeight) - ele.offsetHeight;
if(Y > YMax){Y = YMax;}
ele.style.top = Y + 'px';
result.innerHTML = Math.round(ratio * Y);
} }
var mouseupHandler = function(e){
//鼠标抬起时，表示停止运动
isMoving = false;
//释放全局捕获
if(ele.releaseCapture){
ele.releaseCapture();
}
}
var preventDefaultHandler = function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
//IE8-浏览器阻止默认行为
if(ele.setCapture){
ele.setCapture();
}
}
addEvent(ele,'mousedown',mousedownHandler);
addEvent(ele,'mousedown',preventDefaultHandler);
addEvent(document,'mousemove',mousemoveHandler);
addEvent(document,'mouseup',mouseupHandler); }; scrollbar(test,'x',100);
</script>
元素尺寸
通过拖动滚动条来实现元素尺寸的变化，以改变元素宽度为例。比例关系为：
滚动条已移动距离/滚动条可移动距离= 元素当前宽度/元素最大宽度
<div id="box" style="height: 16px;width: 200px;display:inline-block;background-color:#F5F5F5;border-radius:10px;box-shadow:inset 0 0 6px rgba(0,0,0,0.3);position:relative;">
<div id="test" style="height: 16px;width: 60px;background-color:#D62929;box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;position:absolute;"></div>
</div>
<span id="result" style="width: 1px;height: 50px;background-color:pink;display:inline-block;"></span>
<script>
function addEvent(target,type,handler){
if(target.addEventListener){
target.addEventListener(type,handler,false);
}else{
target.attachEvent('on'+type,function(event){
return handler.call(target,event);
});
}
}
function scrollbar(ele,str,max){
var x0,x1,y0,y1,isMoving,radio; var mousedownHandler = function(e){
e = e || event;
x0 = ele.offsetLeft;
y0 = ele.offsetTop;
x1 = e.clientX;
y1 = e.clientY;
//按下鼠标时，表示正在运动
isMoving = true;
//x轴方向
if(str == 'x'){
ratio = max/(ele.parentNode.offsetWidth - ele.offsetWidth);
//否则为y轴方向
}else{
var disY = e.clientY - ele.offsetTop;
ratio =max/(ele.parentNode.offsetHeight - ele.offsetHeight);
}
}
var mousemoveHandler = function(e){
//如果没有触发down事件，而直接触发move事件，则函数直接返回
if(!isMoving){
return;
}
e = e || event;
if(str == 'x'){
var x2 = e.clientX;
var X = x0 + (x2 - x1);
if(X < 0){X = 0;}
var XMax = parseInt(ele.parentNode.clientWidth) - ele.offsetWidth;
if(X > XMax){X = XMax;}
ele.style.left = X + 'px';
result.style.width = Math.round(ratio * X) + 'px';
}else{
var y2 = e.clientY;
var Y = y0 + (y2 - y1);
if(Y < 0){Y = 0;}
var YMax = parseInt(ele.parentNode.clientHeight) - ele.offsetHeight;
if(Y > YMax){Y = YMax;}
ele.style.top = Y + 'px';
result.style.width = Math.round(ratio * Y) + 'px';
} }
var mouseupHandler = function(e){
//鼠标抬起时，表示停止运动
isMoving = false;
//释放全局捕获
if(ele.releaseCapture){
ele.releaseCapture();
}
}
var preventDefaultHandler = function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
//IE8-浏览器阻止默认行为
if(ele.setCapture){
ele.setCapture();
}
}
addEvent(ele,'mousedown',mousedownHandler);
addEvent(ele,'mousedown',preventDefaultHandler);
addEvent(document,'mousemove',mousemoveHandler);
addEvent(document,'mouseup',mouseupHandler); }; scrollbar(test,'x',100);
</script>
内容滚动
通过拖动滚动条来实现内容滚动，比例关系为：
滚动条已移动距离/滚动条可移动距离= 内容已移动距离/内容可移动距离
<div id="box" style="height: 200px;width: 16px;display:inline-block;background-color:#F5F5F5;border-radius:10px;box-shadow:inset 0 0 6px rgba(0,0,0,0.3);position:relative;vertical-align:middle;">
<div id="test" style="height: 60px;width: 16px;background-color:#D62929;box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;position:absolute;"></div>
</div>
<span id="result" style="width: 100px;height: 200px;background-color:pink;display:inline-block;line-height:30px;vertical-align:middle;position:relative;overflow:hidden;"><div id="resultIn" style="position:absolute;top:0;">测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br></div></span>
<script>
function addEvent(target,type,handler){
if(target.addEventListener){
target.addEventListener(type,handler,false);
}else{
target.attachEvent('on'+type,function(event){
return handler.call(target,event);
});
}
}
function scrollbar(ele,str,max){
var x0,x1,y0,y1,isMoving,radio;
var max = result.offsetHeight - resultIn.offsetHeight;
var mousedownHandler = function(e){
e = e || event;
x0 = ele.offsetLeft;
y0 = ele.offsetTop;
x1 = e.clientX;
y1 = e.clientY;
//按下鼠标时，表示正在运动
isMoving = true;
//x轴方向
if(str == 'x'){
ratio = max/(ele.parentNode.offsetWidth - ele.offsetWidth);
//否则为y轴方向
}else{
var disY = e.clientY - ele.offsetTop;
ratio =max/(ele.parentNode.offsetHeight - ele.offsetHeight);
}
}
var mousemoveHandler = function(e){
//如果没有触发down事件，而直接触发move事件，则函数直接返回
if(!isMoving){
return;
}
e = e || event;
if(str == 'x'){
var x2 = e.clientX;
var X = x0 + (x2 - x1);
if(X < 0){X = 0;}
var XMax = parseInt(ele.parentNode.clientWidth) - ele.offsetWidth;
if(X > XMax){X = XMax;}
ele.style.left = X + 'px';
resultIn.style.left = Math.round(ratio * X) + 'px';
}else{
var y2 = e.clientY;
var Y = y0 + (y2 - y1);
if(Y < 0){Y = 0;}
var YMax = parseInt(ele.parentNode.clientHeight) - ele.offsetHeight;
if(Y > YMax){Y = YMax;}
ele.style.top = Y + 'px';
resultIn.style.top = Math.round(ratio * Y) + 'px';
} }
var mouseupHandler = function(e){
//鼠标抬起时，表示停止运动
isMoving = false;
//释放全局捕获
if(ele.releaseCapture){
ele.releaseCapture();
}
}
var preventDefaultHandler = function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
//IE8-浏览器阻止默认行为
if(ele.setCapture){
ele.setCapture();
}
}
addEvent(ele,'mousedown',mousedownHandler);
addEvent(ele,'mousedown',preventDefaultHandler);
addEvent(document,'mousemove',mousemoveHandler);
addEvent(document,'mouseup',mouseupHandler); }; scrollbar(test);
</script>
javascript动画系列第五篇——模拟滚动条的更多相关文章
- javascript动画系列第三篇——碰撞检测
前面的话 前面分别介绍了拖拽模拟和磁性吸附,当可视区域内存在多个可拖拽元素,就出现碰撞检测的问题,这也是javascript动画的一个经典问题.本篇将详细介绍碰撞检测 原理介绍 碰撞检测的方法有很多, ...
- 深入理解javascript作用域系列第五篇——一张图理解执行环境和作用域
× 目录 [1]图示 [2]概念 [3]说明[4]总结 前面的话 对于执行环境(execution context)和作用域(scope)并不容易区分,甚至很多人认为它们就是一回事,只是高程和犀牛书关 ...
- 深入理解javascript作用域系列第五篇
前面的话 对于执行环境(execution context)和作用域(scope)并不容易区分,甚至很多人认为它们就是一回事,只是高程和犀牛书关于作用域的两种不同翻译而已.但实际上,它们并不相同,却相 ...
- javascript运动系列第五篇——缓冲运动和弹性运动
× 目录 [1]缓冲运动 [2]弹性运动 [3]距离分析[4]步长分析[5]弹性过界[6]弹性菜单[7]弹性拖拽 前面的话 缓冲运动指的是减速运动,减速到0的时候,元素正好停在目标点.而弹性运动同样是 ...
- javascript动画系列第四篇——拖拽改变元素大小
× 目录 [1]原理简介 [2]范围圈定 [3]大小改变[4]代码优化 前面的话 拖拽可以让元素移动,也可以改变元素大小.本文将详细介绍拖拽改变元素大小的效果实现 原理简介 拖拽让元素移动,是改变定位 ...
- javascript面向对象系列第五篇——拖拽的实现
前面的话 在之前的博客中,拖拽的实现使用了面向过程的写法.本文将以面向对象的写法来实现拖拽 写法 <style> .test{height: 50px;width: 50px;backgr ...
- javascript面向对象系列第五篇
<style> .test{height: 50px;width: 50px;background-color: pink;position:absolute;} #test2{left: ...
- javascript动画系列第一篇——模拟拖拽
× 目录 [1]原理介绍 [2]代码实现 [3]代码优化[4]拖拽冲突[5]IE兼容 前面的话 从本文开始,介绍javascript动画系列.javascript本身是具有原生拖放功能的,但是由于兼容 ...
- javascript面向对象系列第三篇——实现继承的3种形式
× 目录 [1]原型继承 [2]伪类继承 [3]组合继承 前面的话 学习如何创建对象是理解面向对象编程的第一步,第二步是理解继承.本文是javascript面向对象系列第三篇——实现继承的3种形式 [ ...
随机推荐
- SqlServer windowss身份登陆和sa身份登陆
今天重新装了系统,但是计算机名变了,于是修改了计算机名,然后装了SQLSEVER,安装完成后登录,发现无论用WINDOWS身份还是SQLSERVER身份都登录不了 1.先说说sqlserver身份登录 ...
- Linux命令dos2unix 从windows转换到linux --- nuix2dos从linux转换到windows
dos2unix命令用来将DOS格式的文本文件转换成UNIX格式的(DOS/MAC to UNIX text file format converter).DOS下的文本文件是以\r\n作为断行标志的 ...
- MySQL表名和数据库关键字相同解决办法
今天改他们的代码的时候,遇到了MySQL表名和数据库关键字的问题. 由于表名是关键字,导致增删改查都报错. Hibernate: select leave0_.id as id22_, leave0_ ...
- vue.js的基本操作
1.{{message}}输出data数据中的message. 2.v-for="todo in todos"输出data数据中的dotos数组 3.v-on:click=&quo ...
- 10分钟学会前端调试利器——FireBug
概述 FireBug是一个用于网站前端开发的工具,它是FireFox浏览器的一个扩展插件.它可以用于调试JavaScript.查看DOM.分析CSS.监控网络流量以及进行Ajax交互等.它提供了几乎前 ...
- android——数据库版本升/降级问题
数据库版本升级 在开发android应用程序的时候,一般由于在我们开发的时候我们不知道以后会后什么新功能,也有可能增加业务逻辑(也就是更新),可想而知我们原来的数据库结构可能不适用已更新的应用,那么应 ...
- opencv算法学习
1.改变图像的亮度和对比度: 算法介绍:对每一点像素值的r,g,b,值进行乘法和加法的运算. 代码使用: ; y < image.rows; y++ ) { ; x < image.col ...
- java学习笔记(1)
最近开始学习java基本技术,在这里总结一下我学到的内容: 1.Java的基本历史 java起源于SUN公司的一个GREEN的项目,其原先目的是:为家用消费电子产品发送一个信息的分布式代码系统,通过发 ...
- OS中atomic的实现解析
OS中atomic的实现解析 转自:http://my.oschina.net/majiage/blog/267409 摘要 atomic属性线程安全,会增加一定开销,但有些时候必须自定义ato ...
- 智能路由器操作系统OpenWrt
小米路由器的“MiWiFi”又让路由器成了关键词,每台智能路由器的系统是该款产品的亮点之一,其系统肯定有不少“好玩”的地方.为自己的智能路由器量身打造系统,并且纷纷开发了适合智能手机.平板电脑等使用的 ...