<p>网站页面效果需要，理了个DEMO放在这里备用。</p><p>纯HTML代码如下：<head></p><p><title>只能在指定区域能移动的层</title></p><p><styletype="text/css"></p><p>*{margin:0px;padding:0px;}</p><p>#dvDragContiner{height:70px;overflow:hidden;width:300px;background:#bbb;position:relative;z-index:0;}</p><p>#dvDragContiner.first{height:8px;overflow:hidden;font-size:0px;width:250px;margin:0pxauto;</p><p>background:#FFF;z-index:1;margin-top:31px;position:relative;}</p><p>#dvDragContiner.drag{height:25px;width:20px;background:red;cursor:pointer;position:absolute;top:0px;z-index:2;left:25px;top:22px;}</p><p></style></p><p><scriptsrc="jquery-1.4.1-vsdoc.js"type="text/javascript"></script></p><p><scriptlanguage="javascript"type="text/javascript"></p><p>varx=0,y=0;</p><p>varmoveable=false;</p><p>varminLeft=25;</p><p>varmaxScrollWidth=300-20-20;</p><p>$(function(){</p><p>varbtIndex=document.all?1:0;</p><p>$("#dvDragContiner.drag").mousedown(function(evt){</p><p>//alert('abc');</p><p>if(evt.button==btIndex){</p><p>//$("#spOne").text("鼠标按下时的位置:x="+evt.pageX+",y="+evt.pageY);</p><p>x=evt.clientX-parseInt($(this).css("left"));</p><p>//y=evt.clientY-parseInt($(this).css("top"));</p><p>moveable=true;</p><p>this.setCapture();//重要</p><p>}</p><p>}).mouseup(function(evt){</p><p>if(moveable){</p><p>moveable=false;</p><p>this.releaseCapture();//重要</p><p>}</p><p>}).mousemove(function(evt){</p><p>var_x=evt.clientX;</p><p>var_movePiex=0;</p><p>if(_x-x<minLeft){</p><p>_movePiex=minLeft;</p><p>}</p><p>elseif(_x-x>maxScrollWidth){</p><p>_movePiex=maxScrollWidth;</p><p>}</p><p>else{</p><p>_movePiex=_x-x;</p><p>}</p><p>if(moveable){</p><p>$(this).css({</p><p>//"top":evt.clientY-y+"px",</p><p>"left":_movePiex+"px"</p><p>})</p><p>}</p><p>});</p><p>});</p><p></script></p><p></head></p><p><body></p><p><divid="dvDragContiner"></p><p><divclass="first"></p><p></div></p><p><divclass="drag"title="只能在白线区域内进行横向滑动"></p><p></div></p><p></div></p><p></body></p><p></html>效果图：图中的红色滑块只能在白色区所绘的区间进行横向滑动。类似Winform中HSrollBar效果。在WEB中可扩展出任意风格的textarea。</p>
