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 相关文章推荐
JavaScript中的运算符种类及其规则介绍
Sep 26 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
Mar 13 Javascript
Javascript定义类(class)的三种方法详解
Mar 13 Javascript
js 判断各种数据类型的简单方法(推荐)
Aug 29 Javascript
基于AngularJS实现iOS8自带的计算器
Sep 12 Javascript
Three.js的使用及绘制基础3D图形详解
Apr 27 Javascript
JavaScript定时器setTimeout()和setInterval()详解
Aug 18 Javascript
使用react-router4.0实现重定向和404功能的方法
Aug 28 Javascript
基于bootstrop常用类总结(推荐)
Sep 11 Javascript
JavaScript中的连续赋值问题实例分析
Jul 12 Javascript
js实现磁性吸附的示例
Oct 26 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
Jan 27 Javascript
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
php数组函数序列之array_unshift() 在数组开头插入一个或多个元素
2011/11/07 PHP
php截取后台登陆密码的代码
2012/05/05 PHP
yii实现级联下拉菜单的方法
2014/07/31 PHP
PHP中header用法小结
2016/05/23 PHP
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
2012/10/11 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
2014/03/27 Javascript
jQuery中dequeue()方法用法实例
2014/12/29 Javascript
jQuery实现购物车计算价格功能的方法
2015/03/25 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
2016/06/24 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
2016/08/01 Javascript
layui弹出层效果实现代码
2017/05/19 Javascript
vue微信分享 vue实现当前页面分享其他页面
2017/12/02 Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
2017/12/28 Javascript
微信小程序 导入图标实现过程详解
2019/10/11 Javascript
[04:53]DOTA2英雄基础教程 祈求者
2014/01/03 DOTA
[10:14]2018DOTA2国际邀请赛寻真——paiN Gaming不仅为自己而战
2018/08/14 DOTA
构建Python包的五个简单准则简介
2015/06/15 Python
一波神奇的Python语句、函数与方法的使用技巧总结
2015/12/08 Python
Python中查看变量的类型内存地址所占字节的大小
2019/06/26 Python
python禁用键鼠与提权代码实例
2019/08/16 Python
树莓派4B+opencv4+python 打开摄像头的实现方法
2019/10/18 Python
Python生态圈图像格式转换问题(推荐)
2019/12/02 Python
新建文件时Pycharm中自动设置头部模板信息的方法
2020/04/17 Python
浅谈keras 模型用于预测时的注意事项
2020/06/27 Python
CSS3 伪类选择器 nth-child()说明
2010/07/10 HTML / CSS
HTML5标签与HTML4标签的区别示例介绍
2013/07/18 HTML / CSS
草莓网化妆品澳大利亚站:Strawberrynet AU
2017/12/18 全球购物
中科软测试工程师面试题
2012/06/16 面试题
实习生自荐信范文分享
2013/11/27 职场文书
大学生职业生涯规划书模版
2013/12/30 职场文书
大学同学聚会邀请函
2014/01/29 职场文书
《黄山奇石》教学反思
2014/04/19 职场文书
秋季运动会开幕词
2015/01/28 职场文书
个人简历求职信范文
2015/03/20 职场文书
自荐信范文
2019/05/20 职场文书
Linux系统下MySQL配置主从分离的步骤
2022/03/21 MySQL