使用js制作滑动条

来源：互联网发布：机器人毛笔字算法编辑：程序博客网时间：2024/06/07 02:42
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>滑动条</title><style>#outer{position: relative;width:800px;height:20px;background-color: #ccc;margin:20px auto;}#inner{position: absolute;left:0;width:20px;height:20px;background-color: red;cursor:pointer;}#box{width:0px;height:0px;background-color: green;margin:0 auto;opacity: 0;}</style></head><body><div id="outer"><div id="inner"></div></div><div id="box"></div><script>function getPos(ev){var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;return{x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};}function getStyle(obj,name){if(obj.currentStyle){return obj.currentStyle[name];}else{return getComputedStyle(obj,false)[name];}}var oDiv = document.getElementById('inner');var oDiv2 = document.getElementById('outer');var oBox = document.getElementById('box');oDiv.onmousedown = function(ev){var oEvent = ev || event;var pos = getPos(oEvent);var disx = pos.x - parseInt(getStyle(oDiv,'left'));document.onmousemove = function(ev){var oEvent = ev || event;var pos = getPos(oEvent);var l = pos.x - disx;if (l<0) {l=0;}if (l>parseInt(getStyle(oDiv2,'width')) - parseInt(getStyle(oDiv,'width'))) {l=parseInt(getStyle(oDiv2,'width')) - parseInt(getStyle(oDiv,'width'))}oDiv.style.left = l + 'px';oBox.style.width = l/2 + 'px';oBox.style.height = l/2 + 'px';oBox.style.opacity = l/800;}document.onmouseup = function(){document.onmousemove = null;document.onmouseup = null;}return false;}</script></body></html>
演示的效果：
0 0