Question

我见过其他解决方案，但他们从未为我工作过。我无法点击图像，让它跟随光标，然后再次单击时释放。到目前为止，当我点击一次时，我只有光标后面的图像，但是当我再次点击时，我不知道如何实现它。这就是我到目前为止所做的：

function moveImage(e) {
        var x = e.clientX-100;
        var y = e.clientY-100;

        document.getElementById("image").style.left = x + "px";
        document.getElementById("image").style.top = y + "px";

}   

function move(e) {
    document.addEventListener("mousemove", dragImage);
}

window.addEventListener("click", move, false);

如何在点击光标后使图像停止？

Answer 1

$(document).ready(function()
{
	$("#div1").mousemove(function(e) 
	{
		var w = $(".image").css("width");
		w=parseFloat(w);
		w=w/2;
		
		var h = $(".image").css("height");
		h=parseFloat(h);
		h=h/2;
		
  		$(".image").css({
			display:'block',
			left: e.pageX - w,
			top: e.pageY - h
		});
	});
	$("#div1").mouseout(function(e) 
	{
  		$("#img1").css("display","none");
	});
});

.image 
{
	display:none;
  	position: absolute;
  	width: 200px;
  	height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="img1" class="image" src="http://static2.businessinsider.com/image/59318bbeb74af41c008b605f/nuclear-bombs-trigger-a-strange-effect-that-can-fry-your-electronics--heres-how-it-works.jpg" />
<div id="div1" style="width:100%; height:500px; background-color:#09F">

这是你想要的吗？

我在js中表现不佳，但这是jquery

Javascript：使用鼠标事件移动图像

1 个答案: