时间戳

首页 > 解决方案 > 使用悬停功能在随机位置生成 div，Jquery

javascript - 使用悬停功能在随机位置生成 div，Jquery

问题描述

我正在尝试制作一个包含 div 的网站，该网站使用 jquery 的悬停功能将其位置更改为随机位置。到目前为止，我让它工作的唯一方法是将函数应用到一个单独的固定按钮，当你将鼠标悬停在它上面时，它会移动 div。

为什么我不能将相同的 javascript 函数应用于 div 类“rand”？

我正在尝试制作一个包含 div 的网站，该网站使用 jquery 的悬停功能将其位置更改为随机位置。到目前为止，我让它工作的唯一方法是将函数应用到一个单独的固定按钮，当你将鼠标悬停在它上面时，它会移动 div。

为什么我不能将相同的 javascript 函数应用于 div 类“rand”？

$('.new_pos').hover(function() {
  var bodyWidth = document.body.clientWidth
  var bodyHeight = document.body.clientHeight;
  var randPosX = Math.floor((Math.random() * bodyWidth));
  var randPosY = Math.floor((Math.random() * bodyHeight));
  var posLog = document.getElementById('pos_log');
  var posXY = 'x: ' + randPosX + '<br />' + 'y: ' + randPosY;

  $('#rand_pos').css('left', randPosX);
  $('#rand_pos').css('top', randPosY);

  posLog.innerHTML = posXY
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rand_pos" class="rand"><img src="Media/MargeDancing_Test01.gif"></div>
<button class="new_pos">Remember</button>

我从这个网站获得了源代码：https ://codepen.io/kaypooma/pen/tAfwm

标签： javascriptjqueryfunctionclassbutton

解决方案

div 没有位置属性，因此 top 和 left 无效。

#rand_pos {
  position: relative;
}

https://jsfiddle.net/calder12/54qfvgnm/1

我还建议使用鼠标悬停而不是悬停，悬停时不那么不稳定

https://jsfiddle.net/calder12/54qfvgnm/2/

推荐阅读