我试图让大量的 .gif 文件出现在页面上的随机位置。我已经设法让第一个执行此操作，但由于某种原因，尽管具有相同的 ID，但所有后续操作都保持静态。 .gif 文件还具有可拖动功能。
谁能告诉我哪里做错了？
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/style.css">
<link rel="stylesheet" type="text/css" media="all" href="css/smoothness/jquery-ui-1.10.3.custom.min.css">
<link rel="stylesheet" type="text/css" media="all" href="http://fonts.googleapis.com/css?family=Cherry+Swash:400,700">
<script type="text/javascript" charset="utf-8" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-ui-1.10.3.custom.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
html {
font: 16px"Segoe UI", "Segoe WPC", Helvetica, Arial, "Arial Unicode MS", Sans-Serif;
}
}
#w {}
</style>
</head>
<body>
<div id="w">
<center>
<img src="images/.gif" height="150" class="draggable ui-draggable" alt="paper" id="image">
<img src="images/.gif" height="150" class="draggable ui-draggable" alt="paper" id="image">
<img src="images/.gif" height="150" class="draggable ui-draggable" alt="paper" id="image">
</div>
<script>
window.onLoad = Prep();
function Prep() {
window_Height = window.innerHeight;
window_Width = window.innerWidth;
image_Element = document.getElementById("image");
image_Height = image_Element.clientHeight;
image_Width = image_Element.clientWidth;
availSpace_V = window_Height - image_Height;
availSpace_H = window_Width - image_Width;
var changeInterval = 3000; // Time has to be in miliseconds. So, 3000 is 3 seconds
setInterval(moveImage, changeInterval);
}
function moveImage() {
var randNum_V = Math.round(Math.random() * availSpace_V);
var randNum_H = Math.round(Math.random() * availSpace_H);
image_Element.style.top = randNum_V + "px";
image_Element.style.left = randNum_H + "px";
}
</script>
<script type="text/javascript">
$(function() {
$('.draggable').draggable({
scroll: true,
cursor: "move"
});
});
</script>
<script type="text/javascript">
$(function() {
$('.draggable').draggable({
scroll: true,
cursor: "move"
});
});
</script>
</body>
</html>最佳答案
您应该只使用一次 id 标签。改用类，例如:
<img src="images/.gif" height="150" class="draggable ui-draggable image" alt="paper">
和
image_Element = document.getElementsByClassName("image");
您还需要进行其他更改，但这应该能为您提供总体思路。
关于javascript - 图片随机放置在页面上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35938779/