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

发布时间：2023-10-21 15:32:07 所属栏目：教程来源：

导读：代码如下:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Resize</title>

<style type="text/css">

#rRightDown,#rLeftDown,#rLeft

代码如下:

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

    }

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

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

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