javascript动画系列之模拟滚动条


Posted in Javascript onDecember 13, 2016

前面的话

当元素内容溢出元素尺寸范围时,会出现滚动条。但由于滚动条在各浏览器下表现不同,兼容性不好。所以,模拟滚动条也是很常见的应用。本文将详细介绍滚动条模拟

原理介绍

滚动条模拟实际上和元素模拟拖拽类似。仅仅通过范围限定,使元素只可以在单一方向上拖拽

<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>
test.onmousedown = function(e){
 e = e || event;
 var that = this;
 var disY = e.clientY - this.offsetTop;
 document.onmousemove = function(e){
  e = e || event;
  var T = e.clientY - disY;
  if(T < 0){T = 0;}
  var TMax = parseInt(box.style.height) - that.offsetHeight;
  if(T > TMax){T = TMax;}
  that.style.top = T + 'px'; 
 }
 document.onmouseup = function(){
  document.onmousemove = null;
  //释放全局捕获
  if(test.releaseCapture){test.releaseCapture();}
 }
 //IE8-浏览器阻止默认行为
 if(test.setCapture){test.setCapture();}
 //阻止默认行为
 return false;
}
</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 scrollbar(obj,str){
 obj.onmousedown = function(e){
  e = e || event;
  var that = this;
  //x轴方向
  if(str == 'x'){
   var disX = e.clientX - this.offsetLeft;
  //否则为y轴方向
  }else{
   var disY = e.clientY - this.offsetTop;
  }
  document.onmousemove = function(e){
   e = e || event;
   if(str == 'x'){
    var L = e.clientX - disX;
    if(L < 0){L = 0;}
    var LMax = parseInt(obj.parentNode.style.width) - that.offsetWidth;
    if(L > LMax){L = LMax;}
    that.style.left = L + 'px'; 
   }else{
    var T = e.clientY - disY;
    if(T < 0){T = 0;}
    var TMax = parseInt(obj.parentNode.style.height) - that.offsetHeight;
    if(T > TMax){T = TMax;}
    that.style.top = T + 'px'; 
   }
  }
  document.onmouseup = function(){
   document.onmousemove = null;
   //释放全局捕获
   if(obj.releaseCapture){obj.releaseCapture();}
  }
  //IE8-浏览器阻止默认行为
  if(obj.setCapture){obj.setCapture();}
  //阻止默认行为
  return false;
 } 
}
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 scrollbar(obj,str,max){
 obj.onmousedown = function(e){
  e = e || event;
  var that = this;
  //比例系数
  var ratio;
  //x轴方向
  if(str == 'x'){
   var disX = e.clientX - this.offsetLeft;
   ratio = max/(this.parentNode.offsetWidth - this.offsetWidth);
  //否则为y轴方向
  }else{
   var disY = e.clientY - this.offsetTop;
   ratio =max/(this.parentNode.offsetHeight - this.offsetHeight);
  }
  document.onmousemove = function(e){
   e = e || event;
   if(str == 'x'){
    var L = e.clientX - disX;
    if(L < 0){L = 0;}
    var LMax = parseInt(obj.parentNode.style.width) - that.offsetWidth;
    if(L > LMax){L = LMax;}
    that.style.left = L + 'px'; 
    result.innerHTML = Math.round(ratio * L);
   }else{
    var T = e.clientY - disY;
    if(T < 0){T = 0;}
    var TMax = parseInt(obj.parentNode.style.height) - that.offsetHeight;
    if(T > TMax){T = TMax;}
    that.style.top = T + 'px'; 
    result.innerHTML = Math.round(ratio * T); 
   }
  }
  document.onmouseup = function(){
   document.onmousemove = null;
   //释放全局捕获
   if(obj.releaseCapture){obj.releaseCapture();}
  }
  //IE8-浏览器阻止默认行为
  if(obj.setCapture){obj.setCapture();}
  //阻止默认行为
  return false;
 } 
}
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 scrollbar(obj,str,max){
 obj.onmousedown = function(e){
  e = e || event;
  var that = this;
  //比例系数
  var ratio;
  //x轴方向
  if(str == 'x'){
   var disX = e.clientX - this.offsetLeft;
   ratio = max/(this.parentNode.offsetWidth - this.offsetWidth);
  //否则为y轴方向
  }else{
   var disY = e.clientY - this.offsetTop;
   ratio =max/(this.parentNode.offsetHeight - this.offsetHeight);
  }
  document.onmousemove = function(e){
   e = e || event;
   if(str == 'x'){
    var L = e.clientX - disX;
    if(L < 0){L = 0;}
    var LMax = parseInt(obj.parentNode.style.width) - that.offsetWidth;
    if(L > LMax){L = LMax;}
    that.style.left = L + 'px'; 
    result.style.width = Math.round(ratio * L) + 'px';
   }else{
    var T = e.clientY - disY;
    if(T < 0){T = 0;}
    var TMax = parseInt(obj.parentNode.style.height) - that.offsetHeight;
    if(T > TMax){T = TMax;}
    that.style.top = T + 'px'; 
    result.style.width = Math.round(ratio * T) + 'px'; 
   }
  }
  document.onmouseup = function(){
   document.onmousemove = null;
   //释放全局捕获
   if(obj.releaseCapture){obj.releaseCapture();}
  }
  //IE8-浏览器阻止默认行为
  if(obj.setCapture){obj.setCapture();}
  //阻止默认行为
  return false;
 } 
}
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 scrollbar(obj,str){
 var max = result.offsetHeight - resultIn.offsetHeight;
 obj.onmousedown = function(e){
  e = e || event;
  var that = this;
  //比例系数
  var ratio;
  //x轴方向
  if(str == 'x'){
   var disX = e.clientX - this.offsetLeft;
   ratio = max/(this.parentNode.offsetWidth - this.offsetWidth);
  //否则为y轴方向
  }else{
   var disY = e.clientY - this.offsetTop;
   ratio =max/(this.parentNode.offsetHeight - this.offsetHeight);
  }
  document.onmousemove = function(e){
   e = e || event;
   if(str == 'x'){
    var L = e.clientX - disX;
    if(L < 0){L = 0;}
    var LMax = parseInt(obj.parentNode.style.width) - that.offsetWidth;
    if(L > LMax){L = LMax;}
    that.style.left = L + 'px'; 
    resultIn.style.top = Math.round(ratio * L) + 'px';
   }else{
    var T = e.clientY - disY;
    if(T < 0){T = 0;}
    var TMax = parseInt(obj.parentNode.style.height) - that.offsetHeight;
    if(T > TMax){T = TMax;}
    that.style.top = T + 'px'; 
    resultIn.style.top = Math.round(ratio * T) + 'px';
   }
  }
  document.onmouseup = function(){
   document.onmousemove = null;
   //释放全局捕获
   if(obj.releaseCapture){obj.releaseCapture();}
  }
  //IE8-浏览器阻止默认行为
  if(obj.setCapture){obj.setCapture();}
  //阻止默认行为
  return false;
 } 
}
scrollbar(test,'y');
</script>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
alixixi runcode.asp的代码不错的应用
Aug 08 Javascript
基于jquery的一行代码轻松实现拖动效果
Dec 28 Javascript
Dom 结点创建 基础知识
Oct 01 Javascript
js动画(animate)简单引擎代码示例
Dec 04 Javascript
jquery提取元素里的纯文本不包含span等里的内容
Sep 30 Javascript
使用jQuery获得内容以及内容的属性
Feb 26 Javascript
jquery利用命名空间移除绑定事件的方法
Mar 11 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
Sep 02 Javascript
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
推荐几个不错的console调试技巧实现
Dec 20 Javascript
JavaScript实现简单的弹窗效果
May 19 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
js闭包用法实例详解
Dec 13 #Javascript
深入学习Bootstrap表单
Dec 13 #Javascript
ThinkJS中如何使用MongoDB的CURD操作
Dec 13 #Javascript
Bootstrap Img 图片样式(推荐)
Dec 13 #Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
Dec 13 #Javascript
教大家轻松制作Bootstrap漂亮表格(table)
Dec 13 #Javascript
AngularJS自定义控件实例详解
Dec 13 #Javascript
You might like
如何选购合适的收音机
2021/03/01 无线电
PHP邮件专题
2006/10/09 PHP
PHP查询MySQL大量数据的时候内存占用分析
2011/07/22 PHP
PHP滚动日志的代码实现
2015/06/10 PHP
Thinkphp5+uploadify实现的文件上传功能示例
2018/05/26 PHP
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
2015/01/13 Javascript
prototype框架中美元符号$用法分析
2016/01/22 Javascript
理解Javascript文件动态加载
2016/01/29 Javascript
jQuery实现三级菜单的代码
2016/05/09 Javascript
KnockoutJS 3.X API 第四章之click绑定
2016/10/10 Javascript
JavaScript之WebSocket技术详解
2016/11/18 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
2016/12/08 Javascript
js中作用域的实例解析
2017/03/16 Javascript
javascript实现简易的计算器
2020/01/17 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
2020/05/10 Javascript
JQuery使用数组遍历跳出each循环
2020/09/01 jQuery
Python中的文件和目录操作实现代码
2011/03/13 Python
Python 字符串操作方法大全
2014/03/11 Python
Python多线程编程(一):threading模块综述
2015/04/05 Python
使用wxPython获取系统剪贴板中的数据的教程
2015/05/06 Python
Python 3.6 读取并操作文件内容的实例
2018/04/23 Python
Python Grid使用和布局详解
2018/06/30 Python
解决python3 HTMLTestRunner测试报告中文乱码的问题
2018/12/17 Python
正则给header的冒号两边参数添加单引号(Python请求用)
2019/08/09 Python
tensorflow tf.train.batch之数据批量读取方式
2020/01/20 Python
python对指定字符串逆序的6种方法(小结)
2020/04/02 Python
shell程序中如何注释
2012/01/28 面试题
大学毕业生通用求职信
2013/09/28 职场文书
搞笑创意广告语
2014/03/17 职场文书
机关干部四风问题自我剖析及整改措施
2014/10/26 职场文书
个人整改措施落实情况汇报
2014/10/29 职场文书
2014年小学语文工作总结
2014/12/20 职场文书
西湖英语导游词
2015/02/06 职场文书
求职意向书范本
2015/05/11 职场文书
《叶问2》观后感
2015/06/15 职场文书
MySQL脏读,幻读和不可重复读
2022/05/11 MySQL