Question

我正在尝试将jquery的mousedown和mouseup用于我的艺术项目。

我的目标是能够在下面的四个div框之一上向下单击（并按住向下移动），来自阵列的图像将随机显示为全角（全屏）。放开鼠标（鼠标）时，图像消失。因此，当您再次单击（并按住）框时，单击向下并从要显示的阵列中选择一个新图像，然后放开该单击，图像就会消失。注意：每个盒子都有自己的图像阵列。

我遇到的问题是当我在box（div）上单击（mousedown）时，全屏显示的图像覆盖了box / div，而当我放开click（mouseup）时，图像没有消失。（不确定div是否被覆盖还是我的代码错误吗？）

我遇到的另一个问题是，第一次单击后功能不会触发。

问题：使用javascript的onmouseup和onmousedown会更好吗？

我使用jQuery的mousedown（）和mouseup（）完成此操作。该功能会针对一个box / div触发一次，但是单击后不会触发。

我希望我的代码允许用户单击任意一个框，能够从数组中馈入图像（每个框将具有自己的数组和自己的唯一图像），并在鼠标按下时（向下单击在鼠标上）将显示图像。在mouseup（放开单击）上，图像消失。我希望用户能够单击任何框/格，并显示一个图像。对html部分感到抱歉，我的第一个div被切断了。

$(".box1")
  .mouseup(function() {
    $("#pasteHere").remove();
  })
  .mousedown(function() {
    var images = ["http://placehold.it/800x800", "http://placehold.it/700x700", "http://placehold.it/600x600", "http://placehold.it/500x500", "http://placehold.it/400x400", "http://placehold.it/100x100", "http://placehold.it/200x200"];

    var image1 = Math.floor((Math.random() * 7));

    $("#pasteHere").attr("src", images[image1]);
  });

$(".box2")
  .mouseup(function() {
    $("#pasteHere").remove();
  })
  .mousedown(function() {
    var images = ["http://placehold.it/800x800", "http://placehold.it/700x700", "http://placehold.it/600x600", "http://placehold.it/500x500", "http://placehold.it/400x400", "http://placehold.it/100x100", "http://placehold.it/200x200"];

    var image1 = Math.floor((Math.random() * 7));

    $("#pasteHere").attr("src", images[image1]);
  });

$(".box3")
  .mouseup(function() {
    $("#pasteHere").remove();
  })
  .mousedown(function() {
    var images = ["http://placehold.it/800x800", "http://placehold.it/700x700", "http://placehold.it/600x600", "http://placehold.it/500x500", "http://placehold.it/400x400", "http://placehold.it/100x100", "http://placehold.it/200x200"];

    var image1 = Math.floor((Math.random() * 7));

    $("#pasteHere").attr("src", images[image1]);
  });

$(".box4")
  .mouseup(function() {
    $("#pasteHere").remove();
  })
  .mousedown(function() {
    var images = ["http://placehold.it/800x800", "http://placehold.it/700x700", "http://placehold.it/600x600", "http://placehold.it/500x500", "http://placehold.it/400x400", "http://placehold.it/100x100", "http://placehold.it/200x200"];

    var image1 = Math.floor((Math.random() * 7));

    $("#pasteHere").attr("src", images[image1]);
  });

.box1,
.box2,
.box3,
.box4 {
  width: 25%;
  height: 100px;
}

.box1 {
  background: red;
}

.box2 {
  background: blue;
}

.box3 {
  background: green;
}

.box4 {
  background: yellow;
}

#pasteHere {
  width: 100% height:auto;
  position: absolute;
  top: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="box1">

</div>
<div class="box2">

</div>
<div class="box3">

</div>
<div class="box4">

</div>

<img src="" id="pasteHere" />

非常感谢！这是我的小提琴：https://jsfiddle.net/vsyjb7dr/2/

Answer 1

您将在发生mouseout事件时删除图像元素。不会再次显示图像。

如果要全屏显示图像，则需要将鼠标移出文档。因为图像会覆盖整个文档，所以不允许将鼠标移出框。

并且可以通过为所有框赋予相同的类来减少代码。

$(".box1")
  .mouseup(function() {
		$("#pasteHere").attr("src","");
  })
  .mousedown(function() {
    var images = ["http://placehold.it/800x800", "http://placehold.it/700x700", "http://placehold.it/600x600", "http://placehold.it/500x500", "http://placehold.it/400x400", "http://placehold.it/100x100", "http://placehold.it/200x200"];

    var image1 = Math.floor((Math.random() * 7));

    $("#pasteHere").attr("src", images[image1]);
  });

$(".box2")
  .mouseup(function() {
		$("#pasteHere").attr("src","");
  })
  .mousedown(function() {
    var images = ["http://placehold.it/800x800", "http://placehold.it/700x700", "http://placehold.it/600x600", "http://placehold.it/500x500", "http://placehold.it/400x400", "http://placehold.it/100x100", "http://placehold.it/200x200"];

    var image1 = Math.floor((Math.random() * 7));

    $("#pasteHere").attr("src", images[image1]);
  });

$(".box3")
  .mouseup(function() {
		$("#pasteHere").attr("src","");
  })
  .mousedown(function() {
    var images = ["http://placehold.it/800x800", "http://placehold.it/700x700", "http://placehold.it/600x600", "http://placehold.it/500x500", "http://placehold.it/400x400", "http://placehold.it/100x100", "http://placehold.it/200x200"];

    var image1 = Math.floor((Math.random() * 7));

    $("#pasteHere").attr("src", images[image1]);
});


$(".box4")
  .mouseup(function() {
		$("#pasteHere").attr("src","");
  })
  .mousedown(function() {
    var images = ["http://placehold.it/800x800", "http://placehold.it/700x700", "http://placehold.it/600x600", "http://placehold.it/500x500", "http://placehold.it/400x400", "http://placehold.it/100x100", "http://placehold.it/200x200"];

    var image1 = Math.floor((Math.random() * 7));

    $("#pasteHere").attr("src", images[image1]);
});

$(document).mouseup(function() {
		$("#pasteHere").attr("src","");
});

.box1,.box2,.box3,.box4{
  width:25%;
  height:100px;
}
.box1{
  background: red;
}
.box2{
  background: blue;
}
.box3{
  background: green;
}
.box4{
  background: yellow;
}
#pasteHere{
width:100%;
height:auto;
position: absolute;
top:0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box1 box">

</div>
<div class="box2 box">

</div>
<div class="box3 box">

</div>
<div class="box4 box">

</div>

<img src="" id="pasteHere"/>

https://jsfiddle.net/u4syckb3/

在mousedown上将图像添加到div，从数组jQuery上在mouseup上移除图像

1 个答案: