我有一个图像，我想每当光标试图触摸图像，它随机移动远离光标我尝试使用jquery，但它不工作，见此链接http://jsfiddle.net/emreerkan/atNva/
我的索引. html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
</head>
<body>
<img src="https://images.pexels.com/photos/569986/pexels-photo-569986.jpeg?auto=compress&cs=tinysrgb&w=600" width="100" height="100" alt="Grey Square" class="som" />
</body>
<!-- <script src="jquery-3.6.1.min.js"></script> -->
<script>
alert('hi')
jQuery(function($) {
$('.som').mouseover(function() {
var dWidth = $(document).width() - 100, // 100 = image width
dHeight = $(document).height() - 100, // 100 = image height
nextX = Math.floor(Math.random() * dWidth),
nextY = Math.floor(Math.random() * dHeight);
$(this).animate({ left: nextX + 'px', top: nextY + 'px' });
});
});
</script>
</html>我的风格. css
body { position: relative; }
#img { position: relative; }
1条答案
按热度按时间b1payxdu1#
在css中使用指针
.som而不是#img，因为在您的jQuey code中您使用了top和left，除非首先设置position属性，否则这些属性将不起作用，在本例中为position:relative;（
static是position的默认值）其他一切看起来都很好