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

更新时间：2014年03月05日 10:17:23 作者：

本篇文章主要是对js通过八个点拖动改变div大小的实现方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助

<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;
};

您可能感兴趣的文章:

js
div拖动

用JS判别浏览器种类以及IE版本的几种方法小结
用JS判别浏览器种类以及IE版本的几种方法小结，需要的朋友可以参考下。
2011-08-08
基于js对象,操作属性、方法详解
下面小编就为大家带来一篇基于js对象,操作属性、方法详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-08-08
JS实现图片剪裁并预览效果
这篇文章主要为大家详细介绍了JS实现图片剪裁并预览效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-08-08
编辑浪子版表单验证类
编辑浪子版表单验证类...
2007-05-05
javascript操作数组详解
这篇文章主要详细介绍了javascript操作数组的方法以及示例,需要的朋友可以参考下
2014-12-12
JavaScript面向对象之七大基本原则实例详解
这篇文章主要介绍了JavaScript面向对象之七大基本原则,结合实例形式详细分析了JavaScript面向对象七大基本原则,包括单一职责、开闭原则、里氏替换、依赖倒置、接口隔离、迪米特法则及组合/聚合复用原则,需要的朋友可以参考下
2020-05-05
JavaScript数组去重的6个方法
本篇文章主要介绍了JavaScript数组去重的6个方法。具有一定的参考价值，下面跟着小编一起来看下吧
2017-01-01
Javascript Ajax异步读取RSS文档具体实现
这篇文章主要介绍了Javascript Ajax异步读取RSS文档具体实现，有需要的朋友可以参考一下
2013-12-12
JavaScript 数组的深度复制解析
一般情况下，使用 “=” 可以实现赋值。但对于数组、对象、函数等这些引用类型的数据，这个符号就不好使了。这篇文章主要介绍了JavaScript 数组的深度复制解析的相关资料,需要的朋友可以参考下
2016-11-11
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
这篇文章主要介绍了JavaScript学习笔记之基于定时器实现图片无缝滚动功能,结合实例形式分析了javascript定时器与页面元素属性动态设置等相关操作技巧,需要的朋友可以参考下
2019-01-01