Question

我的脚本当前在mousemove上生成0-4之间的一个被覆盖的随机数，然后用它来选择要显示的四个图像之一。

目前图像变化太快，但我无法解决如何减慢选择速度的问题。

我尝试按以下方式设置选择之间的间隔，但它只引入了一个初始延迟，之后函数表现正常：

var test = setInterval(Test, 250);

$(function Test() {
    var $imgs = $('#imgs'),
        $img = $('img', $imgs);

    $(document).on("mousemove", function(e) {
        e.preventDefault();
        $img.hide().eq((Math.random()*4)|0).show();
    });
});

之前我正在使用另一种选择我在网上找到的图像的方法here，这种方法效果非常好，尽管不是我想要的随机方式。

$(function() {
    var $imgs = $('#imgs'),
        $img = $('img', $imgs),
        n = $img.length;

    $(document).on("mousemove", function(e) {
        e.preventDefault();
        $img.hide().eq(((e.pageX*0.025)|0)%n).show();
    });
});

我非常感谢一些帮助！

Answer 1

如果我理解你：

var imgs = ["http://trinixy.ru/pics4/20090406/podborka_573_02.jpg",
  "http://trinixy.ru/pics4/20090406/podborka_573_04.jpg",
  "http://trinixy.ru/pics4/20090406/podborka_573_07.jpg",
  "http://trinixy.ru/pics4/20090406/podborka_573_08.jpg"
];

var img = document.getElementById("mainImg");

var timeout = 250;
var isBusy = false;

function changeImg() {
  if (isBusy) return false;
  img.setAttribute("src", imgs[Math.floor(Math.random() * imgs.length)]);
  isBusy = true;
  setTimeout(function() {
    isBusy = false;
  }, timeout)
}

img.onmouseenter = changeImg;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>

  <img id="mainImg" src="http://trinixy.ru/pics4/20090406/podborka_573_02.jpg" alt="" />

</body>

</html>

setInterval：Interval只发生一次

1 个答案: