0

实际上我想创建一个“标记”效果。但是为什么当我单击并拖动图像时会产生“闪烁”效果？我想在图像上拖动时放大 div

<html>           
<head>
<script>
window.onload = function(){
  var imgWrapper = document.getElementById("imgWrapper");
                    imgWrapper.onmousedown = function(event){
                         event.preventDefault();
                         var mouseY = event.layerY;
                         var mouseX = event.layerX;
                         var firstTagging = document.createElement("div");
                         firstTagging.style.position = "absolute";
                         firstTagging.style.top = (mouseY) + "px";
                         firstTagging.style.left = (mouseX) + "px";
                         firstTagging.style.border = "1px solid red";
                         imgWrapper.appendChild(firstTagging);

                         imgWrapper.onmousemove = function(event){
                             firstTagging.style.width = (event.layerX - mouseX) + "px";
                            firstTagging.style.height = (event.layerY - mouseY) + "px";


                         }

                    }
}
</script>
</head>
<body>
<div id="imgWrapper">
<img src="jlin.jpg">
</div>
</body>     
</html>

http://jsfiddle.net/jPkpR/

但是如果我在图像上使用 onmousemove，它可以正常工作，为什么？ http://jsfiddle.net/jPkpR/1/

4

1 回答 1

0

问题在于计算#imgWrapper 的大小。当onmouseover被触发时，#imgWrapper 子元素 ( ) 的高度和宽度firstTagging正在发生变化。这迫使浏览器：

  • 重新计算#imgWrapper 宽度和高度
  • 触发 onmouseover 事件

这可能会重复多次。

事件在图像上时效果很好，因为图像大小没有变化。

作为快速解决方案，您可以添加：

#imgWrapper {
   overflow: hidden; 
}

这将强制固定 #imgWrapper 大小。

于 2013-09-14T06:20:37.540 回答