时间戳

首页 > 解决方案 > 悬停时显示随机图像

javascript - 悬停时显示随机图像

问题描述

我正在寻找一种在悬停某些文本或 div 时显示随机图像的方法。

尝试了一些 CSS 方法，但我认为没有 jQuery 或 Javascript 是不可能的，两者都可以。

我（过于复杂）的想法是使用随机脚本，例如

Math.floor(Math.random() * 10);

然后使用一些嵌套的 if 语句（我知道）在图像文件上添加或删除类，其中 4/5（或其他）将具有隐藏标签，而随机的则会将其删除。我什至无法弄清楚，我绝对认为这是解决这个问题的一种混乱方式。有没有人有更好的主意？非常感谢！

标签： javascriptjqueryhtmlcss

解决方案

您可以将图像 url 放在一个数组中，并在用户将鼠标悬停在文本上时随机选择一个。

例如

var arr = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"];

function getRandomImage() {
  var index = Math.floor(Math.random() * arr.length);
  return arr[index];
}

$("#div").hover(
  function() {
    var image = getRandomImage();
    $("#img").attr("src", image);
    console.log(image);
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="div">hover over me</div>
<img id="img" />

推荐阅读