javascript动画系列之模拟滚动条
孙永思
本文向大家介绍javascript动画系列之模拟滚动条，包括了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>
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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持小牛知识库！
类似资料：
-
我想写个动画。比如说鼠标向上滚动，一个div往上运动。当我鼠标向下的时候，div往下运动。 有没有这种动画库？我以前的做法是判断滚动方向。然后分别执行不同的动画函数。当然了我的一个动画里面，肯定是包含好几个运动元素的。
-
本文向大家介绍浅析JavaScript动画模拟拖拽原理，包括了浅析JavaScript动画模拟拖拽原理的使用技巧和注意事项，需要的朋友参考一下 模拟拖拽的原理： x1等于div.offsetLeft y1等于div.offsetTop x2等于ev.clientX(ev表示event事件) y2等于ev.clientY 当我们在方块上按下鼠标的时候，x2-x1即可确定。移动鼠标之后，我们用鼠标当前
-
本文向大家介绍Android模拟开关按钮点击打开动画（属性动画之平移动画），包括了Android模拟开关按钮点击打开动画（属性动画之平移动画）的使用技巧和注意事项，需要的朋友参考一下 在Android里面，一些炫酷的动画确实是很吸引人的地方，让然看了就赏心悦目，一个好看的动画可能会提高用户对软件的使用率。另外说到动画，在Android里面支持两种动画：补间动画和属性动画，至于这两种动画的区别这里不
-
我目前正在使用JavaFX ScrollBar控件，它本身运行良好-但是我对拖动拇指时的“动画”不满意。 更具体地说： 当我快速拖动拇指时，快速加速-拇指动画不会立即跟随，但有点“滞后”-当我停止拖动拇指时的相同行为。。。拇指真正开始/追上预定位置需要一秒钟的时间 这不是繁重的布局计算之类的问题，因为我只是单独渲染ScrollBar而没有任何内容。 是否有一些选项可以让这个“加速动画”/“滞后”消
-
问题内容： 我一直在寻找一种仅使用CSS3单击位于页面顶部的按钮时向下滚动的方法。 但这对于我的需求而言有点太先进了，因为我只希望浏览器单击页面顶部的一个按钮即可向下滚动，所以我想知道：是否可以在没有输入按钮的情况下进行那些CSS滚动，有锚标签？ HTML看起来像这样： 我已经有一些CSS，需要在单击按钮时触发： 问题答案： 您可以使用css3 伪选择器使用锚标记来完成此操作，当与当前URL哈希具
-
动画系统概览 Unity 拥有丰富和复杂的动画系统（有时称为 Mecanim），提供了以下功能： 为 Unity 中的对象、角色、道具等元素提供易用的动画工作流程和设置。 支持导入动画片断和用 Unity 创建的动画。 人形动画重定位 — 这一能力允许把一个角色模型的动画应用到另一个角色。 为调整动画剪辑提供简化了的工作流程。 为动画剪辑、转换、交互提供方便的预览。使得动画可以更独立于程序和原型运