带有 JavaScript onClick 的随机图像

debugcn 发表于 Dev

tacodestroyer

当单击我网站中的“门”时，我希望在门框内显示 6 个随机图像之一。我已经将一个随机函数组合到一个数组中，但是无法将这些图像装入门框。我在 CSS 中创建了类以正确适合图像，但在阅读了其他一些文章后，听起来我无法在 javascript 数组中调用 css 类？

任何帮助将不胜感激！

这是我的代码笔：https ://codepen.io/tacodestroyer/pen/yXGMBv

这是我的代码：

HTML：

<script src="https://s.codepen.io/assets/libs/prefixfree.min.js"></script>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<p class="alert">click on the door and try to click on more than one door</p>
<div class="perspective" onclick="openDoor(this); randomImg1()">
  <div id = "image" class="image"></div>
  <div class="thumb">
  </div>
</div>

<div class="perspective" onclick="openDoor(this)">
  <div class="image"></div>
  <div class="thumb">
  </div>
</div>
<div class="perspective" onclick="openDoor(this)">
  <div class="image"></div>
  <div class="thumb">
  </div>
</div>
<div class="perspective" onclick="openDoor(this)">
  <div class="image"></div>
  <div class="thumb">
  </div>
</div>

JS：

function openDoor(field) {
  var y = $(field).find(".thumb");
  var x = y.attr("class");
  if (y.hasClass("thumbOpened")) {
    y.removeClass("thumbOpened");
  } else {
    $(".thumb").removeClass("thumbOpened");
    y.addClass("thumbOpened");
  }
}

function randomImg1() {
  var myImage1 = new Array();
  myImage1[0] = ".image1";
  myImage1[1] = ".image2";
  myImage1[2] = ".image3";
  var random = Math.floor(Math.random() * myImage1.length);
  document.getElementById(".image").innerHTML =
    "<img src='" + myImage1[random] + "' alt='image'></img>";
}

CSS：

body {
  background-color: #f0f0f0;
}

.container {
  margin: 0 auto;
  width: 90%;
}
.perspective {
  background: url("http://dc428.4shared.com/img/QWu4ziBq/s3/doorBorder.png");
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  display: inline;
  float: left;
  height: 274px;
  width: 147px;
  margin: 20px;
  margin-left: 0px;
  -webkit-perspective: 450;
  border-radius: 3px;
  box-sizing: border-box;
}

.thumb {
  background: url("http://dc428.4shared.com/img/-vayshJ-/s3/ClassDoor.png");
  background-repeat: no-repeat;
  background-position: center center;
  width: 147px;
  height: 274px;
  position: absolute;
  box-sizing: border-box;
  border-radius: 3px;
  box-shadow: 0 0 0 10px rgba(255, 255, 255, .0) inset;
  transition: 1s transform linear;
  transform-origin: left;
  cursor: pointer;
}

.thumbOpened {
  transform: rotateY(-90deg);
  transform-origin: 8px;
  transition: .5s linear;
}

.alert {
  padding: 8px 35px 8px 14px;
  margin-bottom: 20px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  background-color: #fcf8e3;
  border: 1px solid #fbeed5;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  color: #000;

  transform-origin: left;
  transform: rotateY(180deg);
  opacity: 0;
  animation-name: go;
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-delay: 0.5s;
  width: 350px;
}
@keyframes go {
  100% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}

.image {
  background: url("https://www.petfinder.com/wp-content/uploads/2012/11/91615172-find-a-lump-on-cats-skin-632x475.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  display: inline;
  float: left;
  height: 235px;
  width: 110px;
  margin: 20px;
  margin-left: 1x;
  -webkit-perspective: 450;
  border-radius: 3px;
  box-sizing: border-box;
}

.image1 {
  background: url("https://www.petfinder.com/wp-content/uploads/2012/11/91615172-find-a-lump-on-cats-skin-632x475.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  display: inline;
  float: left;
  height: 235px;
  width: 110px;
  margin: 20px;
  margin-left: 1x;
  -webkit-perspective: 450;
  border-radius: 3px;
  box-sizing: border-box;
}

.image2 {
  background: url("http://cdn3-www.dogtime.com/assets/uploads/gallery/goldador-dog-breed-pictures/puppy-1.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  display: inline;
  float: left;
  height: 235px;
  width: 110px;
  margin: 20px;
  margin-left: 1x;
  -webkit-perspective: 450;
  border-radius: 3px;
  box-sizing: border-box;
}

.image3 {
  background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Bartagame_fcm.jpg/1200px-Bartagame_fcm.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  display: inline;
  float: left;
  height: 235px;
  width: 110px;
  margin: 20px;
  margin-left: 1x;
  -webkit-perspective: 450;
  border-radius: 3px;
  box-sizing: border-box;
}

.image4 {
  background: url("http://images.tritondigitalcms.com/6616/sites/395/2017/04/04103227/MONKEY.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  display: inline;
  float: left;
  height: 235px;
  width: 110px;
  margin: 20px;
  margin-left: 1x;
  -webkit-perspective: 450;
  border-radius: 3px;
  box-sizing: border-box;
}

.image5 {
  background: url("http://www.dupageforest.org/uploadedImages/Content/District_News/Nature_Stories/2016/Snapping%20Turtle%20Scott%20Plantier%20STP4793.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  display: inline;
  float: left;
  height: 235px;
  width: 110px;
  margin: 20px;
  margin-left: 1x;
  -webkit-perspective: 450;
  border-radius: 3px;
  box-sizing: border-box;
}

.image6 {
  background: url("https://s-media-cache-ak0.pinimg.com/736x/32/00/3b/32003bd128bebe99cb8c655a9c0f00f5--rabbit-baby-raising-rabbits.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  display: inline;
  float: left;
  height: 235px;
  width: 110px;
  margin: 20px;
  margin-left: 1x;
  -webkit-perspective: 450;
  border-radius: 3px;
  box-sizing: border-box;
}

.popUpImage{
position: absolute;
background: url("https://s-media-cache-ak0.pinimg.com/736x/32/00/3b/32003bd128bebe99cb8c655a9c0f00f5--rabbit-baby-raising-rabbits.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
z-index: 10000;
height: 250px;
width: 80px;

}

多诺万

你可以做这样的事情。这是基于您在 codepen 中拥有的内容。

function randomImg1() {
  var myImage1 = new Array();
  myImage1[0] = "https://68.media.tumblr.com/9768ea8b71fd67b7a90e7384c7756910/tumblr_inline_n1rtjwlsZb1so4q1u.jpg";
  myImage1[1] = "https://www.doyouyoga.com/wp-content/uploads/2017/01/dog-meme-10.jpg";
  myImage1[2] = "http://imworld.aufeminin.com/story/20140423/cat-meme-218141_w650.jpg";

  var classes = ['class1', 'class2', 'class3'];

  var random = Math.floor(Math.random() * myImage1.length);
  document.getElementById("image").attributes;
  document.getElementById("image").innerHTML =
    "<img src='" + myImage1[random] + "' class='" + classes[random] + "' alt='image'></img>" ;
}

class1将匹配您的第一张图片，class2第二张图片，依此类推。classes[random]无论随机数是什么，使用都将确保它们匹配。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。