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

来源：互联网发布：java b2b开源电商平台编辑：程序博客网时间：2024/06/05 23:58

这个功能，很多框架，如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;}

核心就是这样。

源代码下载

0 0