讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

0

0

js实现的八点拖动修改div大小的代码_javascript技巧

php中文网

php中文网

发布时间：2016-05-16 18:33:43

|

1697人浏览过

|

来源于php中文网

原创

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

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

相关文章

如何在网页中正确嵌入多个 p5.js 实例（避免页面空白）

如何用JavaScript实现数据可视化_使用图表库如D3.js？

JavaScript如何实现虚拟DOM_怎样优化渲染性能

如何将 jQuery 的拖拽事件正确迁移到原生 JavaScript

javascript Svelte是什么_与传统框架有何不同

java速学教程(入门到精通)

java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载

相关标签:

js

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：几个比较经典常用的jQuery小技巧_jquery 下一篇：JavaScript页面刷新与弹出窗口问题的解决方法_javascript技巧

热门AI工具

更多

DeepSeek

DeepSeek

幻方量化公司旗下的开源大模型平台

AI大模型

开放平台

豆包大模型

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI大模型

通义千问

通义千问

阿里巴巴推出的全能AI助手

AI大模型

腾讯元宝

腾讯元宝

腾讯混元平台推出的AI助手

文档处理

Excel 表格

文心一言

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI大模型

中文写作

讯飞写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

中文写作

写作工具

即梦AI

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

图画生成

ChatGPT

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI大模型

中文写作

智谱清言 - 免费全能的AI助手

智谱清言 - 免费全能的AI助手

智谱清言 - 免费全能的AI助手

AI大模型

PDF 文档

相关专题

更多

ip地址修改教程大全

ip地址修改教程大全

本专题整合了ip地址修改教程大全，阅读下面的文章自行寻找合适的解决教程。

33

2025.12.26

压缩文件加密教程汇总

压缩文件加密教程汇总

本专题整合了压缩文件加密教程，阅读专题下面的文章了解更多详细教程。

18

2025.12.26

wifi无ip分配

wifi无ip分配

本专题整合了wifi无ip分配相关教程，阅读专题下面的文章了解更多详细教程。

46

2025.12.26

漫蛙漫画入口网址

漫蛙漫画入口网址

本专题整合了漫蛙入口网址大全，阅读下面的文章领取更多入口。

91

2025.12.26

b站看视频入口合集

b站看视频入口合集

本专题整合了b站哔哩哔哩相关入口合集，阅读下面的文章查看更多入口。

283

2025.12.26

俄罗斯搜索引擎yandex入口汇总

俄罗斯搜索引擎yandex入口汇总

本专题整合了俄罗斯搜索引擎yandex相关入口合集，阅读下面的文章查看更多入口。

370

2025.12.26

虚拟号码教程汇总

虚拟号码教程汇总

本专题整合了虚拟号码接收验证码相关教程，阅读下面的文章了解更多详细操作。

35

2025.12.25

错误代码dns_probe_possible

错误代码dns_probe_possible

本专题整合了电脑无法打开网页显示错误代码dns_probe_possible解决方法，阅读专题下面的文章了解更多处理方案。

25

2025.12.25

网页undefined啥意思

网页undefined啥意思

本专题整合了undefined相关内容，阅读下面的文章了解更多详细内容。后续继续更新。

72

2025.12.25

热门下载

更多

网站特效

/

网站源码

/

网站素材

/

前端模板

相关下载

更多

GNCMS可视化拖拽公司网站模板1.0.0

精品课程

更多

相关推荐

/

热门推荐

/

最新课程

前端项目-尚优选【HTML/CSS/JS技术综合实战】

前端项目-尚优选【HTML/CSS/JS技术综合实战】

共39课时 | 3.9万人学习

WEB前端教程【HTML5+CSS3+JS】

WEB前端教程【HTML5+CSS3+JS】

共101课时 | 8万人学习

JS进阶与BootStrap学习

JS进阶与BootStrap学习

共39课时 | 3.1万人学习

最新文章

更多

如何用JavaScript实现一个代码编辑器_如何实现语法高亮和自动补全？

javascript如何操作json_怎样序列化和解析复杂数据结构

如何修复因参数名冲突导致的递归函数调用失败问题

Javascript如何实现数组去重_有哪些高效的方法？

怎样使用Shadow DOM封装样式_它如何避免冲突

javascript中事件冒泡和捕获是什么_如何阻止事件传播

如何在网页中正确嵌入多个 p5.js 实例（避免页面空白崩溃）

Puppeteer 分页爬虫：正确处理动态分页与导航等待

JavaScript如何管理项目依赖_JavaScript中NPM和Yarn有什么区别

javascript变量提升是什么_为什么会有这种现象

关于我们免责申明举报中心意见反馈讲师合作广告合作最新更新: php中文网：公益在线php培训，帮助PHP学习者快速成长！; 关注服务号技术交流群

PHP中文网订阅号: 每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

PHP学习

技术支持

返回顶部