js通过八个点 拖动改变div大小的实现方法


Posted in Javascript onMarch 05, 2014
<html> 
<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> 
<script> 
var Sys = (function(ua){ 
    var s = {}; 
    s.IE = ua.match(/msie ([\d.]+)/)?true:false; 
    s.Firefox = ua.match(/firefox\/([\d.]+)/)?true:false; 
    s.Chrome = ua.match(/chrome\/([\d.]+)/)?true:false; 
    s.IE6 = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6))?true:false; 
    s.IE7 = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 7))?true:false; 
    s.IE8 = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 8))?true:false; 
    return s; 
})(navigator.userAgent.toLowerCase());
var $ = function (id) { 
    return document.getElementById(id); 
};
var Css = function(e,o){ 
    for(var i in o) 
    e.style[i] = o[i]; 
};
var Extend = function(destination, source) { 
    for (var property in source) { 
        destination[property] = source[property]; 
    } 
};
var Bind = function(object, fun) { 
    var args = Array.prototype.slice.call(arguments).slice(2); 
    return function() { 
        return fun.apply(object, args); 
    } 
};
var BindAsEventListener = function(object, fun) { 
    var args = Array.prototype.slice.call(arguments).slice(2); 
    return function(event) { 
        return fun.apply(object, [event || window.event].concat(args)); 
    } 
};
var CurrentStyle = function(element){ 
    return element.currentStyle || document.defaultView.getComputedStyle(element, null); 
};
function addListener(element,e,fn){ 
    element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn); 
}; 
function removeListener(element,e,fn){ 
    element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn) 
};
var Class = function(properties){ 
    var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;}; 
    _class.prototype = properties; 
    return _class; 
};
var Resize =new Class({ 
    initialize : function(obj){ 
        this.obj = obj; 
        this.resizeelm = null; 
        this.fun = null; //记录触发什么事件的索引 
        this.original = []; //记录开始状态的数组 
        this.width = null; 
        this.height = null; 
        this.fR = BindAsEventListener(this,this.resize); 
        this.fS = Bind(this,this.stop);     
    }, 
    set : function(elm,direction){ 
        if(!elm)return; 
        this.resizeelm = elm; 
        addListener(this.resizeelm,'mousedown',BindAsEventListener(this, this.start, this[direction])); 
        return this; 
    }, 
    start : function(e,fun){ 
        this.fun = fun; 
        this.original = [parseInt(CurrentStyle(this.obj).width),parseInt(CurrentStyle(this.obj).height),parseInt(CurrentStyle(this.obj).left),parseInt(CurrentStyle(this.obj).top)];
        this.width = (this.original[2]||0) + this.original[0]; 
        this.height = (this.original[3]||0) + this.original[1]; 
        addListener(document,"mousemove",this.fR); 
        addListener(document,'mouseup',this.fS); 
    }, 
    resize : function(e){ 
        this.fun(e); 
        Sys.IE?(this.resizeelm.onlosecapture=function(){this.fS()}):(this.resizeelm.onblur=function(){this.fS()}) 
    }, 
    stop : function(){ 
        removeListener(document, "mousemove", this.fR); 
        removeListener(document, "mousemove", this.fS); 
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();     
    }, 
    up : function(e){ 
        this.height>e.clientY?Css(this.obj,{top:e.clientY + "px",height:this.height-e.clientY + "px"}):this.turnDown(e); 
    }, 
    down : function(e){ 
        e.clientY>this.original[3]?Css(this.obj,{top:this.original[3]+'px',height:e.clientY-this.original[3]+'px'}):this.turnUp(e);     
    }, 
    left : function(e){ 
        e.clientX<this.width?Css(this.obj,{left:e.clientX +'px',width:this.width-e.clientX + "px"}):this.turnRight(e);         
    }, 
    right : function(e){ 
        e.clientX>this.original[2]?Css(this.obj,{left:this.original[2]+'px',width:e.clientX-this.original[2]+"px"}):this.turnLeft(e)    ; 
    }, 
    leftUp:function(e){ 
        this.up(e);this.left(e); 
    }, 
    leftDown:function(e){ 
        this.left(e);this.down(e); 
    }, 
    rightUp:function(e){ 
        this.up(e);this.right(e); 
    }, 
    rightDown:function(e){ 
        this.right(e);this.down(e); 
    },                 
    turnDown : function(e){ 
        Css(this.obj,{top:this.height+'px',height:e.clientY - this.height + 'px'}); 
    }, 
    turnUp : function(e){ 
        Css(this.obj,{top : e.clientY +'px',height : this.original[3] - e.clientY +'px'}); 
    }, 
    turnRight : function(e){ 
        Css(this.obj,{left:this.width+'px',width:e.clientX- this.width +'px'}); 
    }, 
    turnLeft : function(e){ 
        Css(this.obj,{left:e.clientX +'px',width:this.original[2]-e.clientX+'px'});          
    }         
}); 
window.onload = function(){ 
    new Resize($('ss')).set($('rUp'),'up').set($('rDown'),'down').set($('rLeft'),'left').set($('rRight'),'right').set($('rLeftUp'),'leftUp').set($('rLeftDown'),'leftDown').set($('rRightDown'),'rightDown').set($('rRightUp'),'rightUp');
} 
</script> 
</body> 
</html>
Javascript 相关文章推荐
新发现一个骗链接的方法(js读取cookies)
Jan 11 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
Dec 16 Javascript
JQuery中$.each 和$(selector).each()的区别详解
Mar 13 Javascript
详解javascript高级定时器
Dec 31 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
Jan 27 Javascript
jquery动态遍历Json对象的属性和值的方法
Jul 27 Javascript
几行js代码实现自适应
Feb 24 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
May 18 Javascript
vue 使用自定义指令实现表单校验的方法
Aug 28 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
Aug 01 Javascript
JS实现网页烟花动画效果
Mar 10 Javascript
vue 动态添加class,三个以上的条件做判断方式
Nov 02 Javascript
javascript日期格式化示例分享
Mar 05 #Javascript
javascript避免数字计算精度误差的方法详解
Mar 05 #Javascript
javascript/jquery获取地址栏url参数的方法
Mar 05 #Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
Mar 05 #Javascript
js特殊字符过滤的示例代码
Mar 05 #Javascript
jquerymobile局部渲染的各种刷新方法小结
Mar 05 #Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
Mar 05 #Javascript
You might like
PHP 和 XML: 使用expat函数(一)
2006/10/09 PHP
php安装swoole扩展的方法
2015/03/19 PHP
用javascript实现给出的盒子的序列是否可连为一矩型
2007/08/30 Javascript
js 鼠标拖动对象 可让任何div实现拖动效果
2009/11/09 Javascript
mailto的使用技巧分享
2012/12/21 Javascript
Jquery绑定事件(bind和live的区别介绍)
2013/08/23 Javascript
php跨域调用json的例子
2013/11/13 Javascript
jquery得到iframe src属性值的方法
2014/09/25 Javascript
在HTML代码中使用JavaScript代码的例子
2014/10/16 Javascript
深入分析jsonp协议原理
2015/09/26 Javascript
jQuery实现验证年龄简单思路
2016/02/24 Javascript
Node.js 应用跑得更快 10 个技巧
2016/04/03 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
2016/05/26 Javascript
JavaScript禁止用户多次提交的两种方法
2016/07/24 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
2016/12/01 Javascript
基于Vue实现timepicker
2017/04/25 Javascript
带你快速理解javascript中的事件模型
2017/08/14 Javascript
vue二级菜单导航点击选中事件的方法
2018/09/12 Javascript
jQuery实现简单三级联动效果
2020/09/05 jQuery
[01:03:50]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第二场 2月7日
2021/03/11 DOTA
Python实现根据IP地址和子网掩码算出网段的方法
2015/07/30 Python
详解python 发送邮件实例代码
2016/12/22 Python
python 调用c语言函数的方法
2017/09/29 Python
Python面向对象程序设计OOP深入分析【构造函数,组合类,工具类等】
2019/01/05 Python
python多线程高级锁condition简单用法示例
2019/11/07 Python
Python列表切片常用操作实例解析
2019/12/16 Python
Python实现银行账户资金交易管理系统
2020/01/03 Python
实例讲解CSS3中Transform的perspective属性的用法
2016/04/22 HTML / CSS
国外最大的眼镜网站:Coastal
2017/08/09 全球购物
夏威夷灵感服装及配饰:Reyn Spooner
2018/09/18 全球购物
婴儿鞋,独特的婴儿服装和配件:Zutano
2018/11/03 全球购物
总经理秘书的岗位职责
2013/12/27 职场文书
创新比赛获奖感言
2014/02/13 职场文书
换届选举主持词
2015/07/03 职场文书
《悲惨世界》:比天空更广阔的是人的心灵
2020/01/16 职场文书
Java实现斗地主之洗牌发牌
2021/06/14 Java/Android