javascript动画系列之模拟滚动条(2)

<div> <div></div> </div> <span><div>测试文字<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>