Question

我试图让很多.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>

Answer 1

您应该只使用id个代码一次。请改用类，例如：

<img src="images/.gif" height="150" class="draggable ui-draggable image" alt="paper">

和

image_Element = document.getElementsByClassName("image");

您还需要进行其他更改，但这应该为您提供一般性的想法。

Answer 2

由于你正在使用JQuery，你可以做类似的事情。

window.onload = Prep();
var window_Height, window_Width;
var changeInterval = 3000;

function Prep(){
  window_Height = $(window).height();
  window_Width = $(window).width();
}

function moveImage(imgEl,space_V,space_H){
  var randNum_V = Math.round(Math.random() * space_V);
  var randNum_H = Math.round(Math.random() * space_H);

  imgEl.style.top = randNum_V + "px";
  imgEl.style.left = randNum_H + "px";
}

$('img').each(function(){
  var img = $(this);
  var image_Height = img.height();
  var image_Width = img.width();
  var availSpace_V = window_Height - image_Height;
  var availSpace_H = window_Width - image_Width;

  setInterval(moveImage(img,availSpace_V,availspace_H),changeInterval);
});

我缩短了 Prep 函数以获取窗口尺寸并更改了 moveImage 函数以将必要的变量作为参数传递。这样，您可以单独为每个图像使用该功能。

JQuery .each 定位页面上的每个 img 元素，并相应地执行 moveImage 函数。如果你想要更具体而不是定位所有图像元素，你可以通过做类似的事情来选择ID为 w 的div中的那些。

$('#w').find('img').each(function(){...

希望这有帮助！

随机放置在页面

2 个答案: