时间戳

首页 > 解决方案 > 在照片上放置一个不可见的 div 元素（onclick）（repl.it）

javascript - 在照片上放置一个不可见的 div 元素（onclick）（repl.it）

问题描述

元素放置的视觉效果

我正在尝试制作一个小“宠物狗游戏”，我想在他的头上放一个 div，当你单击 DIV 时，它会触发一个 JS 函数将照片更改为 .gif 然后再返回这里是我的代码JS：

 function pet_head(){
    var image = getElementById("image");
    image.src="DogPet.gif";
    setTimeout(function(){
      image.src="dog.jpeg";

    }, 1000//length of gif
   );

};

HTML：

<div class="main">
  <img id="image" src="dog.jpeg">
  <div class="click></div>
</div>

CSS：

img{
height:100%;
width100%;
position:absolute;
}

标签： javascripthtmlcss

解决方案

这是您的代码的工作版本。另请注意（除了删除代码拼写错误）我添加object-fit: cover到您的img中，以便在视口大小更改时保持纵横比。

function pet_head() {
   // var image = document.getElementById("image");
   alert("petting the dog");
   /* image.src = "DogPet.gif";
   setTimeout(function() {
       image.src = "dog.jpeg";
   
     }, 1000 //length of gif
   ); */

 };
 
 document.querySelector(".click").addEventListener("click", pet_head);
img {
  height: 100%;
  width: 100%;
  position: absolute;
  object-fit: cover;  
}

.click {
  position: absolute;
  left: 49%;
  top: 22px;
  height: 13vh;
  width: 17vw;
  cursor: pointer;
}

/* Presentational styles */

.click {
  background: yellow;
  opacity: .1;
}

html, body {
  margin: 0;
}

*, *::before, &::after { 
  box-sizing: border-box; 
}
<div class="main">
  <img id="image" src="https://i.stack.imgur.com/FthXz.jpg">
  <div class="click"></div>
</div>

jsFiddle

推荐阅读