JavaScript限定范围拖拽及自定义滚动条应用(3)

两个对象：div1和div2，其中div1是div2的父元素，div2只能在div1的范围内拖拽

图中，红点是鼠标的位置，两个绿色箭头相减的结果就是disX，最后oEvent.clientX - disX就是绿色箭头的部分，这个长度就是判断是否"出格"的依据，也就是这个短的绿色箭头范围应该在0 ~ div 2。偏移量为-div 1。用.抵消之间！

！DOCTYPE html html head meta charset=' utf-8 '标题客户区可见范围限制拖拽/title style type=' text/CSS ' * { padd : 0；保证金： 0；} # div1 {宽度： 500px高度： 500像素；背景：橙色；相对位置：left : 100pxtop : 30px } # div 2 { width : 100px高度： 100像素；背景：黑色；绝对位置：border: 1px纯蓝；}/style/head body div id=' div 1 ' div id=' div 2 '/div/div脚本类型=' text/JavaScript ' var ODI v1=document。getelementbyid(' div 1 ')；var ODI v2=文档。getelementbyid(' div 2 ')；函数getStyle(obj，attr){ if(obj。currentstyle){ return obj。current style[attr]；} else { return getComputedStyle(obj，null)[attr]；} } ODI v2。onmousedown=function(ev){ var oEvent=ev | | event；//var disX=oevent。clientx-ODI v2。offsetleft//var disY=oevent。clienty-ODI v2。偏移；var disX=oevent。clientx-parsent(getStyle(ODI v2，‘left’)；var disY=oevent。clienty-parsent(getStyle(ODI v2，' top ')；文件。onmousemove=function(ev){ var oEvent=ev | | event；var l=oevent。客户端x-DIsX；var t=oevent。client y-DIsy；if(l 0){ l=0；} else if(l ODI v1。offsetwithts-/* parsent(getStyle(ODI v2，' width ')*/ODI v2。offsetwithts){ l=ODI v1。offsetwithts-ODI v2。在两者之间；} if(t 0){ t=0；} else if(t ODI v1。偏移热量-ODI v2。偏移热量){ t=ODI v1。偏移热量-ODI v2。抵消热量；} ODI v2。风格。left=l ' pxODI v2。风格。top=t ' px};文件。onmouseup=function(){ document。onmousemove=null//如果不取消，鼠标弹起差异依旧会随着鼠标移动document . onmouseup=null }；};/脚本/正文/html基于上述原理，我们来做一个自定义滚动条，通过拖拽滚动条的位置来控制另一个对象的大小，比如一幅图。

！DOCTYPE html html head meta charset=' utf-8 '标题自定义滚动条/title style type=' text/CSS ' # div 1 { width : 600 px；高度： 20像素背景：橙色；相对位置：余量： 50px自动；} # div 2 { width : 20px three : 20px背景：绿色；绝对位置：} # div 3 {宽度： 0；高度： 0;余量： 20px自动；} # div 3 img {宽度： 100%；高度： 100%;}/style/head body div id=' div 1 ' div id=' div 2 '/div/div id=' div 3 ' img src=' http :3359 Tim GSA。百度。com/141128/201411281041075742。jpg '/div脚本类型=' text/JavaScript ' var ODI v1=document。getelementbyid(' div 1 ')；var ODI v2=文档。getelementbyid(' div 2 ')；var ODI v3=文档。getelementbyid(' div 3 ')；ODI v2。onmousedown=function(ev){ var oEvent=ev | | event；var disX=oevent。clientx-ODI v2。offsetleft文件。onmousemove=function(ev){ var oEvent=ev | | event；var l=oevent。客户端x-DIsX；if(l 0){ l=0；} else if(l ODI v1。用-ODI v2偏移。偏移量为){ l=ODI v1。用-ODI v2偏移。用.抵消；} ODI v2。风格。left=l ' px//l范围：[0，580]//文档。title=l/580；//范围：[0，1]var比率=ODI v1。用-ODI v2偏移。用.抵消；定义变量标度=l /比率；var w=600 *刻度；var h=370 *刻度；控制台。原木(w)；odiv 3。风格。CSSCText='；宽度： ' w ' px高度： ' h ' px'；};文件。onmouseup=function(){ document。onmousemove=nulldocument . onmouseup=null }；};/脚本/正文/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。