javascript动画系列之模拟滚动条
程序员文章站
2023-11-19 12:18:04
前面的话
当元素内容溢出元素尺寸范围时,会出现滚动条。但由于滚动条在各浏览器下表现不同,兼容性不好。所以,模拟滚动条也是很常见的应用。本文将详细介绍滚动条模拟
原理介绍...
前面的话
当元素内容溢出元素尺寸范围时,会出现滚动条。但由于滚动条在各浏览器下表现不同,兼容性不好。所以,模拟滚动条也是很常见的应用。本文将详细介绍滚动条模拟
原理介绍
滚动条模拟实际上和元素模拟拖拽类似。仅仅通过范围限定,使元素只可以在单一方向上拖拽
<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>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
上一篇: windows安装vue.js的步骤教程
下一篇: JS声明式函数与赋值式函数实例分析