首页 > 代码库 > javascript动画系列第五篇——模拟滚动条

javascript动画系列第五篇——模拟滚动条

2024-08-14 11:58:06   223人阅读

×
目录
[1]原理介绍 [2]数字加减 [3]元素尺寸[4]内容滚动

前面的话

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

 

原理介绍

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

<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>

<iframe style="width: 100%; height: 220px;" src="http://sandbox.runjs.cn/show/zbwokf5a" frameborder="0" width="320" height="240"></iframe>

　　通过将上面代码封装成函数，可以实现横向和纵向两种滚动条

<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>

<iframe style="width: 100%; height: 240px;" src="http://sandbox.runjs.cn/show/5kkb4nlc" frameborder="0" width="320" height="240"></iframe>

应用

　　下面来介绍通过滚动条实现的几个应用

数字加减

　　通过移动滚动条来实现数字的加减。比例关系为：

滚动条已移动距离/滚动条可移动距离= 数字当前值/数字最大值
<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>

<iframe style="width: 100%; height: 40px;" src="http://sandbox.runjs.cn/show/8jc8dhtw" frameborder="0" width="320" height="240"></iframe>

元素尺寸

　　通过拖动滚动条来实现元素尺寸的变化，以改变元素宽度为例。比例关系为：

滚动条已移动距离/滚动条可移动距离= 元素当前宽度/元素最大宽度
<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>

<iframe style="width: 100%; height: 80px;" src="http://sandbox.runjs.cn/show/rrgmmhkl" frameborder="0" width="320" height="240"></iframe>

内容滚动

　　通过拖动滚动条来实现内容滚动，比例关系为：

滚动条已移动距离/滚动条可移动距离= 内容已移动距离/内容可移动距离
<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>

<iframe style="width: 100%; height: 230px;" src="http://sandbox.runjs.cn/show/twmvhsi2" frameborder="0" width="320" height="240"></iframe>

<script type="text/javascript">// 0){ return; } if(select[i].getBoundingClientRect().top <= 0 && select[i+1]){ if(select[i+1].getBoundingClientRect().top > 0){ change(oCon.children[i+2]) } }else{ change(oCon.children[select.length+1]) } }}document.body.onmousewheel = wheel;document.body.addEventListener(‘DOMMouseScroll‘,wheel,false);var oCon = document.getElementById("content");var close = oCon.getElementsByTagName(‘span‘)[0];close.onclick = function(){ if(this.innerHTML == ‘显示目录‘){ this.innerHTML = ‘ב; this.style.background = ‘‘; oCon.style.border = ‘2px solid #ccc‘; oCon.style.width = ‘‘; oCon.style.height = ‘‘; oCon.style.overflow = ‘‘; oCon.style.lineHeight = ‘30px‘; }else{ this.innerHTML = ‘显示目录‘; this.style.background = ‘#3399ff‘; oCon.style.border = ‘none‘; oCon.style.width = ‘60px‘; oCon.style.height = ‘30px‘; oCon.style.overflow = ‘hidden‘; oCon.style.lineHeight = ‘‘; }}for(var i = 2; i < oCon.children.length; i++){ oCon.children[i].onmouseover = function(){ this.style.color = ‘#3399ff‘; } oCon.children[i].onmouseout = function(){ this.style.color = ‘inherit‘; if(this.mark){ this.style.color = ‘#3399ff‘; } } oCon.children[i].onclick = function(){ change(this); } }function change(_this){ for(var i = 2; i < oCon.children.length; i++){ oCon.children[i].mark = false; oCon.children[i].style.color = ‘inherit‘; oCon.children[i].style.textDecoration = ‘none‘; oCon.children[i].style.borderColor = ‘transparent‘; } _this.mark = true; _this.style.color = ‘#3399ff‘; _this.style.textDecoration = ‘underline‘; _this.style.borderColor = ‘#2175bc‘; }// ]]></script><script type="text/javascript" src="http://files.cnblogs.com/files/xiaohuochai/contextMenu.js"></script>

javascript动画系列第五篇——模拟滚动条


联系
我们