div选中效果及鼠标指针变形

最新推荐文章于 2024-09-01 13:46:58 发布

娴姐要努力啦

最新推荐文章于 2024-09-01 13:46:58 发布

阅读量2.6k

点赞数

分类专栏：前端文章标签： jQuery js

本文链接：https://blog.csdn.net/aslan16/article/details/51754731

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这个功能，很多框架，如mxGraph都有，但是他们的集成太复杂，我自己做了一个效果。

先上效果图

第一个的效果。

我看到mxGraph是用的svg实现的，我现在需要用div实现。但是参考了一点mxGraph的思路。

1、选中目标时，添加几个小的div，我分别加的是四个边，四个角，四个中点，一共是12个div

//四条边
			active.append(createMyElement(width + borderWidth,borderWidth,- borderWidth/2,- borderWidth/2,"activeBorder"));
			active.append(createMyElement(width + borderWidth,borderWidth,- borderWidth/2,height- borderWidth/2,"activeBorder"));
			active.append(createMyElement(borderWidth,height + borderWidth,- borderWidth/2,- borderWidth/2,"activeBorder"));
			active.append(createMyElement(borderWidth,height + borderWidth,width - borderWidth/2,-borderWidth/2,"activeBorder"));
			
			
			//四个顶点
			active.append(createMyElement(pointWidth,pointWidth,- pointWidth/2,- pointWidth/2,"activeBorder"));
			active.append(createMyElement(pointWidth,pointWidth,- pointWidth/2,height- pointWidth/2,"activeBorder"));
			active.append(createMyElement(pointWidth,pointWidth,width - pointWidth/2,- pointWidth/2,"activeBorder"));
			active.append(createMyElement(pointWidth,pointWidth,width - pointWidth/2,height - pointWidth/2,"activeBorder"));
			
			//四个中点
			active.append(createMyElement(pointWidth,pointWidth,width/2 - pointWidth/2,- pointWidth/2,"activeBorder"));
			active.append(createMyElement(pointWidth,pointWidth,width/2 - pointWidth/2, height - pointWidth/2,"activeBorder"));
			active.append(createMyElement(pointWidth,pointWidth,- pointWidth/2,height/2 - pointWidth/2,"activeBorder"));
			active.append(createMyElement(pointWidth,pointWidth,width - pointWidth/2, height/2 - pointWidth/2,"activeBorder"));

其中，createMyElement()方法：

function createMyElement(width,height,left,top ,className){
			var element = document.createElement("div");
			element.style.width = width + "px";
			element.style.height= height+"px";
			element.style.top = top + "px";
			element.style.left = left + "px";
			if(className){
				element.className = className;
			}
			return element;
		}

2、鼠标移到对应的点上，鼠标的指针会进行变化

.active .activeBorder:nth-child(5){cursor:nw-resize;}
			.active .activeBorder:nth-child(6){cursor:sw-resize;}
			.active .activeBorder:nth-child(7){cursor:sw-resize;}
			.active .activeBorder:nth-child(8){cursor:nw-resize;}
			.active .activeBorder:nth-child(9){cursor:n-resize;}
			.active .activeBorder:nth-child(10){cursor:n-resize;}
			.active .activeBorder:nth-child(11){cursor:w-resize;}
			.active .activeBorder:nth-child(12){cursor:w-resize;}

核心就是这样。

源代码下载