html js 鼠标变图片大小,原生JS，实现图片可拖拽，并且移动四个角和四条变能够自由变换图片大小...

网上搜的资料，源码如下：

* {

margin: 0;

padding: 0

}

.box {

position: absolute;

top: 100px;

left: 100px;

}

/*四边*/

.box .t,

.box .b,

.box .l,

.box .r {

position: absolute;

z-index: 1;

background:#666;

}

.box .l,

.box .r {

width: 10px;

height: 100%;

cursor: col-resize;

}

.box .t,

.box .b {

width: 100%;

height: 10px;

cursor: row-resize;

}

.box .t {

top: 0;

}

.box .b {

bottom: 0;

}

.box .l {

left: 0;

}

.box .r {

right: 0;

}

/*四角*/

.box .tl,

.box .bl,

.box .br,

.box .tr {

width: 20px;

height: 20px;

position: absolute;

background: #CCC;

z-index: 2;

cursor: nwse-resize

}

.box .tl,

.box .bl {

left: -5px;

}

.box .tr,

.box .br {

right: -5px;

}

.box .br,

.box .bl {

bottom: -5px;

}

.box .tl,

.box .tr {

top: -5px;

}

.box .tr,

.box .bl {

cursor: nesw-resize;

}

/*图片*/

img {

width: 100%;

height: 100%;

}

window.onload = function () {

var oDiv = document.getElementsByTagName('div')[0];

oDiv.style.width = '500px';

var aSpan = oDiv.getElementsByTagName('span');

for (var i = 0; i < aSpan.length; i++) {

dragFn(aSpan[i]);

}

function dragFn(obj) {

obj.onmousedown = function (ev) {

var oEv = ev || event;

var oldWidth = oDiv.offsetWidth;

var oldHeight = oDiv.offsetHeight;

var oldX = oEv.clientX;

var oldY = oEv.clientY;

var oldLeft = oDiv.offsetLeft;

var oldTop = oDiv.offsetTop;

document.onmousemove = function (ev) {

var oEv = ev || event;

if (obj.className == 'tl') {

oDiv.style.width = oldWidth - (oEv.clientX - oldX) + 'px';

oDiv.style.height=oldHeight-(oEv.clientY-oldY)+'px';

oDiv.style.left = oldLeft + (oEv.clientX - oldX) + 'px';

oDiv.style.top = oldTop + (oEv.clientY - oldY) + 'px';

}

else if (obj.className == 'bl') {

oDiv.style.width = oldWidth - (oEv.clientX - oldX) + 'px';

oDiv.style.height=oldHeight+(oEv.clientY-oldY)+'px';

oDiv.style.left = oldLeft + (oEv.clientX - oldX) + 'px';

oDiv.style.bottom = oldTop + (oEv.clientY + oldY) + 'px';

}

else if (obj.className == 'tr') {

oDiv.style.width = oldWidth + (oEv.clientX - oldX) + 'px';

oDiv.style.height = oldHeight - (oEv.clientY - oldY)+'px';

oDiv.style.right = oldLeft - (oEv.clientX - oldX) + 'px';

oDiv.style.top = oldTop + (oEv.clientY - oldY) + 'px';

}

else if (obj.className == 'br') {

oDiv.style.width = oldWidth + (oEv.clientX - oldX) + 'px';

oDiv.style.height = oldHeight + (oEv.clientY - oldY)+'px';

oDiv.style.right = oldLeft - (oEv.clientX - oldX) + 'px';

oDiv.style.bottom = oldTop + (oEv.clientY + oldY) + 'px';

}

else if (obj.className == 't') {

oDiv.style.height=oldHeight-(oEv.clientY-oldY)+'px';

oDiv.style.top = oldTop + (oEv.clientY - oldY) + 'px';

}

else if (obj.className == 'b') {

oDiv.style.height = oldHeight + (oEv.clientY - oldY)+'px';

oDiv.style.bottom = oldTop - (oEv.clientY + oldY) + 'px';

}

else if (obj.className == 'l') {

oDiv.style.height = oldHeight + 'px';

oDiv.style.width = oldWidth - (oEv.clientX - oldX) + 'px';

oDiv.style.left = oldLeft + (oEv.clientX - oldX) + 'px';

}

else if (obj.className == 'r') {

oDiv.style.height = oldHeight + 'px';

oDiv.style.width = oldWidth + (oEv.clientX - oldX) + 'px';

oDiv.style.right = oldLeft - (oEv.clientX - oldX) + 'px';

}

};

document.onmouseup = function () {

document.onmousemove = null;

};

return false;

};

}

};

原生js实现Canvas实现拖拽式绘图，支持画笔、线条、箭头、三角形和圆形等等图形绘制功能，有实例Demo

前言 需要用到图形绘制,没有找到完整的图形绘制实现,所以自己实现了一个 - - 演示地址:查看演示DEMO 新版本支持IE5+(你没看错,就是某软的IE浏览器)以上任意浏览器的Canvas绘图:htt ...

原生js实现模块来回拖拽效果

代码比较冗余,还没来得及做整理,往见谅. 主要用到的 JS 事件有: onmousedown:鼠标点下事件 onmousemove:鼠标移动事件 onmouseup:鼠标放开事件 具体代码如下: &l ...

vuejs2&period;0运用原生js实现简单的拖拽元素功能

纯JS Web在线可拖拽的流程设计器

F2工作流引擎之-纯JS Web在线可拖拽的流程设计器 Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回. ...

js 实现table表格拖拽和点击表头升降序排序

js 实现table表格拖拽和点击表头升降序排序,写的比较乱,用的时候可以把其中的一些模块函数提取出来 样式,由于是可拖拽表格,所以样式 table tr th{cursor:move;} js实现 ...

Ant Design -- 图片可拖拽效果，图片跟随鼠标移动

Ant Design 图片可拖拽效果,图片跟随鼠标移动,需计算鼠标在图片中与图片左上角的X轴的距离和鼠标在图片中与图片左上角的Y轴的距离. constructor(props) { super(pro ...

js实现本地图片文件拖拽效果

如何拖拽图片到指定位置,具体方法如下 在从本地上传图片的时候,如果使用拖拽效果,想想应该是更加的高大上,下面直接上js代码 完整代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...

随机推荐

重置svn地址

TortoiseSVN->relocate  更改svn地址

JS获取页面元素并修改

//实现代码如下,非常简单

iOS小技巧 - 和屏幕等宽的Table分割线

前言 因为本人也是学习iOS才一个多月,在写程序的过程中经常会遇到一些看似应该很简单,但是要解决好却要知道一点小trick的问题. 因此后面会陆续记一些这类问题,一来加深印象,二来也可以做个备忘录. ...

HornetQ

https://github.com/flsusp/http-queue https://github.com/sfr-network-service-platforms/hq-console htt ...

ubuntu下安装opencv库&plus;Python2&period;7环境安装及开发摄像头拍照应用

好久没有更新了,今天更一篇最近遇到的问题,及解决办法,后面博客得继续写起来 安装 #使用Python下的lib库直接进行安装 apt-get install python-opencv 测试 #使用如 ...

Fabric动态增加组织【资料】

Fabric在启动之前需要生成Orderer的创世区块和channel的配置区块.也就是说在Fabric网络启动之前我们就必须定好了有哪些Org,而当Fabric已经跑起来之后,想要增加Org却是很麻 ...

ACM&sol;ICPC 2018亚洲区预选赛北京赛站网络赛D-80 Days--------树状数组

题意就是说1-N个城市为一个环,最开始你手里有C块钱,问从1->N这些城市中,选择任意一个,然后按照顺序绕环一圈,进入每个城市会有a[i]元钱,出来每个城市会有b[i]个城市,问是否能保证经过每 ...

Intellj IDEA光标问题

Intellj IDEA光标为insert状态,无法删除内容以前用得是社区版的IDEA,今天装了14版本的,结果导入项目后,发现打开java文件的光标是win系统下按了insert键后的那种宽的光标, ...

【BZOJ3105】新Nim游戏(线性基)

[BZOJ3105]新Nim游戏(线性基) 题面 BZOJ Description 传统的Nim游戏是这样的:有一些火柴堆,每堆都有若干根火柴(不同堆的火柴数量可以不同).两个游戏者轮流操作,每次可以 ...

数据库——MySQL——索引——索引原理及B&plus;树

索引原理 我们使用索引,就是为了提高查询的效率,如同查书一样,先找到章,再找到章中对于的小节,再找到具体的页码,再到我们需要的内容. 事实上索引的本质就是不断缩小获取数据的筛选范围,找出我们想要的结果 ...