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监听输入框值的即时变化onpropertychange、oninput
Jul 13 Javascript
Javascript查询DBpedia小应用实例学习
Mar 07 Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
Apr 21 Javascript
7款吸引人眼球的jQuery/CSS3特效实例分享
Apr 25 Javascript
将文本输入框内容加入表中的js代码
Aug 18 Javascript
js 获取时间间隔实现代码
May 12 Javascript
JavaScript数组各种常见用法实例分析
Aug 04 Javascript
原生JavaScript实现异步多文件上传
Dec 02 Javascript
jQuery UI Bootstrap是什么?
Jun 17 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
May 08 Javascript
脚手架vue-cli工程webpack的作用和特点
Sep 29 Javascript
浅谈Vue.js之初始化el以及数据的绑定说明
Nov 14 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常用函数的使用汇总
2013/06/08 PHP
php递归获取目录内文件(包含子目录)封装类分享
2013/12/25 PHP
php生成xml时添加CDATA标签的方法
2014/10/17 PHP
php处理静态页面:页面设置缓存时间实例
2017/06/22 PHP
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
2011/03/01 Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
2012/02/16 Javascript
JSONP之我见
2015/03/24 Javascript
js实现文本框输入文字个数限制代码
2015/12/25 Javascript
java中String类型变量的赋值问题介绍
2016/03/23 Javascript
理解javascript模块化
2016/03/28 Javascript
js字符串操作总结(必看篇)
2016/11/22 Javascript
javascript函数的四种调用模式
2017/01/08 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
2017/04/17 jQuery
node+koa实现数据mock接口的方法
2017/09/20 Javascript
JS块级作用域和私有变量实例分析
2019/05/11 Javascript
Node.js+ELK日志规范的实现
2019/05/23 Javascript
nodejs脚本centos开机启动实操方法
2020/03/04 NodeJs
Javascript柯里化实现原理及作用解析
2020/10/22 Javascript
在实例中重学JavaScript事件循环
2020/12/03 Javascript
JavaScript 判断浏览器是否是IE
2021/02/19 Javascript
盘点提高 Python 代码效率的方法
2014/07/03 Python
Python中return语句用法实例分析
2015/08/04 Python
python动态加载包的方法小结
2016/04/18 Python
python中的tcp示例详解
2018/12/09 Python
Python qqbot 实现qq机器人的示例代码
2019/07/11 Python
python 画函数曲线示例
2019/12/04 Python
django框架cookie和session用法实例详解
2019/12/10 Python
python print 格式化输出,动态指定长度的实现
2020/04/12 Python
通过Python实现一个简单的html页面
2020/05/16 Python
详解python爬取弹幕与数据分析
2020/11/14 Python
JINS眼镜官方网站:日本最大的眼镜邮购
2016/10/14 全球购物
煤矿班组长岗位职责
2013/12/29 职场文书
工作说明书格式
2014/07/29 职场文书
如何写贫困证明申请书
2014/10/29 职场文书
黄山导游词
2015/01/31 职场文书
2015年乡镇党务公开工作总结
2015/05/19 职场文书