资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
js实现的八点拖动修改div大小的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Resize</title> <style type="text/css"> #rRightDown,#rLeftDown,#rLeftUp,#rRightUp,#rRight,#rLeft,#rUp,#rDown{ position:absolute;background:#C00;width:6px;height:6px;z-index:5;font-size:0;} #rLeftDown,#rRightUp{cursor:ne-resize;} #rRightDown,#rLeftUp{cursor:nw-resize;} #rRight,#rLeft{cursor:e-resize;} #rUp,#rDown{cursor:n-resize;} #rRightDown{ bottom:-3px; right:-3px;} #rLeftDown{ bottom:-3px; left:-3px;} #rRightUp{ top:-3px; right:-3px;} #rLeftUp{ top:-3px; left:-3px;} #rRight{ right:-3px; top:50%} #rLeft{ left:-3px; top:50%} #rUp{ top:-3px; left:50%} #rDown{ bottom:-3px; left:50%} </style> </head> <body> <div id='ss' style="height:100px; width:100px; border:1px solid #000000; position:absolute; left:200px; top:200px;" > <div id="rRightDown"> </div> <div id="rLeftDown"> </div> <div id="rRightUp"> </div> <div id="rLeftUp"> </div> <div id="rRight"> </div> <div id="rLeft"> </div> <div id="rUp"> </div> <div id="rDown"></div> </div> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%20%0D%0Avar%20Sys%20%3D%20(function(ua)%7B%20%0D%0A%20%20%20%20var%20s%20%3D%20%7B%7D%3B%20%0D%0A%20%20%20%20s.IE%20%3D%20ua.match(%2Fmsie%20(%5B%5Cd.%5D%2B)%2F)%3Ftrue%3Afalse%3B%20%0D%0A%20%20%20%20s.Firefox%20%3D%20ua.match(%2Ffirefox%5C%2F(%5B%5Cd.%5D%2B)%2F)%3Ftrue%3Afalse%3B%20%0D%0A%20%20%20%20s.Chrome%20%3D%20ua.match(%2Fchrome%5C%2F(%5B%5Cd.%5D%2B)%2F)%3Ftrue%3Afalse%3B%20%0D%0A%20%20%20%20s.IE6%20%3D%20(s.IE%26%26(%5B%2FMSIE%20(%5Cd)%5C.0%2Fi.exec(navigator.userAgent)%5D%5B0%5D%5B1%5D%20%3D%3D%206))%3Ftrue%3Afalse%3B%20%0D%0A%20%20%20%20s.IE7%20%3D%20(s.IE%26%26(%5B%2FMSIE%20(%5Cd)%5C.0%2Fi.exec(navigator.userAgent)%5D%5B0%5D%5B1%5D%20%3D%3D%207))%3Ftrue%3Afalse%3B%20%0D%0A%20%20%20%20s.IE8%20%3D%20(s.IE%26%26(%5B%2FMSIE%20(%5Cd)%5C.0%2Fi.exec(navigator.userAgent)%5D%5B0%5D%5B1%5D%20%3D%3D%208))%3Ftrue%3Afalse%3B%20%0D%0A%20%20%20%20return%20s%3B%20%0D%0A%7D)(navigator.userAgent.toLowerCase())%3B%20%0D%0A%0D%0Avar%20%24%20%3D%20function%20(id)%20%7B%20%0D%0A%20%20%20%20return%20document.getElementById(id)%3B%20%0D%0A%7D%3B%20%0D%0A%0D%0Avar%20Css%20%3D%20function(e%2Co)%7B%20%0D%0A%20%20%20%20for(var%20i%20in%20o)%20%0D%0A%20%20%20%20e.style%5Bi%5D%20%3D%20o%5Bi%5D%3B%20%0D%0A%7D%3B%20%0D%0A%0D%0Avar%20Extend%20%3D%20function(destination%2C%20source)%20%7B%20%0D%0A%20%20%20%20for%20(var%20property%20in%20source)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20destination%5Bproperty%5D%20%3D%20source%5Bproperty%5D%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%3B%20%0D%0A%0D%0Avar%20Bind%20%3D%20function(object%2C%20fun)%20%7B%20%0D%0A%20%20%20%20var%20args%20%3D%20Array.prototype.slice.call(arguments).slice(2)%3B%20%0D%0A%20%20%20%20return%20function()%20%7B%20%0D%0A%20%20%20%20%20%20%20%20return%20fun.apply(object%2C%20args)%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%3B%20%0D%0A%0D%0Avar%20BindAsEventListener%20%3D%20function(object%2C%20fun)%20%7B%20%0D%0A%20%20%20%20var%20args%20%3D%20Array.prototype.slice.call(arguments).slice(2)%3B%20%0D%0A%20%20%20%20return%20function(event)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20return%20fun.apply(object%2C%20%5Bevent%20%7C%7C%20window.event%5D.concat(args))%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%3B%20%0D%0A%0D%0Avar%20CurrentStyle%20%3D%20function(element)%7B%20%0D%0A%20%20%20%20return%20element.currentStyle%20%7C%7C%20document.defaultView.getComputedStyle(element%2C%20null)%3B%20%0D%0A%7D%3B%20%0D%0A%0D%0Afunction%20addListener(element%2Ce%2Cfn)%7B%20%0D%0A%20%20%20%20element.addEventListener%3Felement.addEventListener(e%2Cfn%2Cfalse)%3Aelement.attachEvent(%22on%22%20%2B%20e%2Cfn)%3B%20%0D%0A%7D%3B%20%0D%0Afunction%20removeListener(element%2Ce%2Cfn)%7B%20%0D%0A%20%20%20%20element.removeEventListener%3Felement.removeEventListener(e%2Cfn%2Cfalse)%3Aelement.detachEvent(%22on%22%20%2B%20e%2Cfn)%20%0D%0A%7D%3B%20%0D%0A%0D%0Avar%20Class%20%3D%20function(properties)%7B%20%0D%0A%20%20%20%20var%20_class%20%3D%20function()%7Breturn%20(arguments%5B0%5D%20!%3D%3D%20null%20%26%26%20this.initialize%20%26%26%20typeof(this.initialize)%20%3D%3D%20'function')%20%3F%20this.initialize.apply(this%2C%20arguments)%20%3A%20this%3B%7D%3B%20%0D%0A%20%20%20%20_class.prototype%20%3D%20properties%3B%20%0D%0A%20%20%20%20return%20_class%3B%20%0D%0A%7D%3B%20%0D%0A%0D%0Avar%20Resize%20%3Dnew%20Class(%7B%20%0D%0A%20%20%20%20initialize%20%3A%20function(obj)%7B%20%0D%0A%20%20%20%20%20%20%20%20this.obj%20%3D%20obj%3B%20%0D%0A%20%20%20%20%20%20%20%20this.resizeelm%20%3D%20null%3B%20%0D%0A%20%20%20%20%20%20%20%20this.fun%20%3D%20null%3B%20%2F%2F%E8%AE%B0%E5%BD%95%E8%A7%A6%E5%8F%91%E4%BB%80%E4%B9%88%E4%BA%8B%E4%BB%B6%E7%9A%84%E7%B4%A2%E5%BC%95%20%0D%0A%20%20%20%20%20%20%20%20this.original%20%3D%20%5B%5D%3B%20%2F%2F%E8%AE%B0%E5%BD%95%E5%BC%80%E5%A7%8B%E7%8A%B6%E6%80%81%E7%9A%84%E6%95%B0%E7%BB%84%20%0D%0A%20%20%20%20%20%20%20%20this.width%20%3D%20null%3B%20%0D%0A%20%20%20%20%20%20%20%20this.height%20%3D%20null%3B%20%0D%0A%20%20%20%20%20%20%20%20this.fR%20%3D%20BindAsEventListener(this%2Cthis.resize)%3B%20%0D%0A%20%20%20%20%20%20%20%20this.fS%20%3D%20Bind(this%2Cthis.stop)%3B%20%20%20%20%20%0D%0A%20%20%20%20%7D%2C%20%0D%0A%20%20%20%20set%20%3A%20function(elm%2Cdirection)%7B%20%0D%0A%20%20%20%20%20%20%20%20if(!elm)return%3B%20%0D%0A%20%20%20%20%20%20%20%20this.resizeelm%20%3D%20elm%3B%20%0D%0A%20%20%20%20%20%20%20%20addListener(this.resizeelm%2C'mousedown'%2CBindAsEventListener(this%2C%20this.start%2C%20this%5Bdirection%5D))%3B%20%0D%0A%20%20%20%20%20%20%20%20return%20this%3B%20%0D%0A%20%20%20%20%7D%2C%20%0D%0A%20%20%20%20start%20%3A%20function(e%2Cfun)%7B%20%0D%0A%20%20%20%20%20%20%20%20this.fun%20%3D%20fun%3B%20%0D%0A%20%20%20%20%20%20%20%20this.original%20%3D%20%5BparseInt(CurrentStyle(this.obj).width)%2CparseInt(CurrentStyle(this.obj).height)%2CparseInt(CurrentStyle(this.obj).left)%2CparseInt(CurrentStyle(this.obj).top)%5D%3B%20%0D%0A%20%20%20%20%20%20%20%20this.width%20%3D%20(this.original%5B2%5D%7C%7C0)%20%2B%20this.original%5B0%5D%3B%20%0D%0A%20%20%20%20%20%20%20%20this.height%20%3D%20(this.original%5B3%5D%7C%7C0)%20%2B%20this.original%5B1%5D%3B%20%0D%0A%20%20%20%20%20%20%20%20addListener(document%2C%22mousemove%22%2Cthis.fR)%3B%20%0D%0A%20%20%20%20%20%20%20%20addListener(document%2C'mouseup'%2Cthis.fS)%3B%20%0D%0A%20%20%20%20%7D%2C%20%0D%0A%20%20%20%20resize%20%3A%20function(e)%7B%20%0D%0A%20%20%20%20%20%20%20%20this.fun(e)%3B%20%0D%0A%20%20%20%20%20%20%20%20Sys.IE%3F(this.resizeelm.onlosecapture%3Dfunction()%7Bthis.fS()%7D)%3A(this.resizeelm.onblur%3Dfunction()%7Bthis.fS()%7D)%20%0D%0A%20%20%20%20%7D%2C%20%0D%0A%20%20%20%20stop%20%3A%20function()%7B%20%0D%0A%20%20%20%20%20%20%20%20removeListener(document%2C%20%22mousemove%22%2C%20this.fR)%3B%20%0D%0A%20%20%20%20%20%20%20%20removeListener(document%2C%20%22mousemove%22%2C%20this.fS)%3B%20%0D%0A%20%20%20%20%20%20%20%20window.getSelection%20%3F%20window.getSelection().removeAllRanges()%20%3A%20document.selection.empty()%3B%20%20%20%20%20%0D%0A%20%20%20%20%7D%2C%20%0D%0A%20%20%20%20up%20%3A%20function(e)%7B%20%0D%0A%20%20%20%20%20%20%20%20this.height%3Ee.clientY%3FCss(this.obj%2C%7Btop%3Ae.clientY%20%2B%20%22px%22%2Cheight%3Athis.height-e.clientY%20%2B%20%22px%22%7D)%3Athis.turnDown(e)%3B%20%0D%0A%20%20%20%20%7D%2C%20%0D%0A%20%20%20%20down%20%3A%20function(e)%7B%20%0D%0A%20%20%20%20%20%20%20%20e.clientY%3Ethis.original%5B3%5D%3FCss(this.obj%2C%7Btop%3Athis.original%5B3%5D%2B'px'%2Cheight%3Ae.clientY-this.original%5B3%5D%2B'px'%7D)%3Athis.turnUp(e)%3B%20%20%20%20%20%0D%0A%20%20%20%20%7D%2C%20%0D%0A%20%20%20%20left%20%3A%20function(e)%7B%20%0D%0A%20%20%20%20%20%20%20%20e.clientX%3Cthis.width%3FCss(this.obj%2C%7Bleft%3Ae.clientX%20%2B'px'%2Cwidth%3Athis.width-e.clientX%20%2B%20%22px%22%7D)%3Athis.turnRight(e)%3B%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%7D%2C%20%0D%0A%20%20%20%20right%20%3A%20function(e)%7B%20%0D%0A%20%20%20%20%20%20%20%20e.clientX%3Ethis.original%5B2%5D%3FCss(this.obj%2C%7Bleft%3Athis.original%5B2%5D%2B'px'%2Cwidth%3Ae.clientX-this.original%5B2%5D%2B%22px%22%7D)%3Athis.turnLeft(e)%20%20%20%20%3B%20%0D%0A%20%20%20%20%7D%2C%20%0D%0A%20%20%20%20leftUp%3Afunction(e)%7B%20%0D%0A%20%20%20%20%20%20%20%20this.up(e)%3Bthis.left(e)%3B%20%0D%0A%20%20%20%20%7D%2C%20%0D%0A%20%20%20%20leftDown%3Afunction(e)%7B%20%0D%0A%20%20%20%20%20%20%20%20this.left(e)%3Bthis.down(e)%3B%20%0D%0A%20%20%20%20%7D%2C%20%0D%0A%20%20%20%20rightUp%3Afunction(e)%7B%20%0D%0A%20%20%20%20%20%20%20%20this.up(e)%3Bthis.right(e)%3B%20%0D%0A%20%20%20%20%7D%2C%20%0D%0A%20%20%20%20rightDown%3Afunction(e)%7B%20%0D%0A%20%20%20%20%20%20%20%20this.right(e)%3Bthis.down(e)%3B%20%0D%0A%20%20%20%20%7D%2C%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20turnDown%20%3A%20function(e)%7B%20%0D%0A%20%20%20%20%20%20%20%20Css(this.obj%2C%7Btop%3Athis.height%2B'px'%2Cheight%3Ae.clientY%20-%20this.height%20%2B%20'px'%7D)%3B%20%0D%0A%20%20%20%20%7D%2C%20%0D%0A%20%20%20%20turnUp%20%3A%20function(e)%7B%20%0D%0A%20%20%20%20%20%20%20%20Css(this.obj%2C%7Btop%20%3A%20e.clientY%20%2B'px'%2Cheight%20%3A%20this.original%5B3%5D%20-%20e.clientY%20%2B'px'%7D)%3B%20%0D%0A%20%20%20%20%7D%2C%20%0D%0A%20%20%20%20turnRight%20%3A%20function(e)%7B%20%0D%0A%20%20%20%20%20%20%20%20Css(this.obj%2C%7Bleft%3Athis.width%2B'px'%2Cwidth%3Ae.clientX-%20this.width%20%2B'px'%7D)%3B%20%0D%0A%20%20%20%20%7D%2C%20%0D%0A%20%20%20%20turnLeft%20%3A%20function(e)%7B%20%0D%0A%20%20%20%20%20%20%20%20Css(this.obj%2C%7Bleft%3Ae.clientX%20%2B'px'%2Cwidth%3Athis.original%5B2%5D-e.clientX%2B'px'%7D)%3B%20%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%7D%20%20%20%20%20%20%20%20%20%0D%0A%7D)%3B%20%0D%0Awindow.onload%20%3D%20function()%7B%20%0D%0A%20%20%20%20new%20Resize(%24('ss')).set(%24('rUp')%2C'up').set(%24('rDown')%2C'down').set(%24('rLeft')%2C'left').set(%24('rRight')%2C'right').set(%24('rLeftUp')%2C'leftUp').set(%24('rLeftDown')%2C'leftDown').set(%24('rRightDown')%2C'rightDown').set(%24('rRightUp')%2C'rightUp')%3B%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程