Question

当我将鼠标放在div上时，我试图使图像从目录中随机出现在正文中。现在，我只能生成一个图像，但是它不能放在任何位置。我将如何获得它以便我的图像出现在身体上，同时又能够一遍又一遍地进行呢？非常感谢！

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CCA Workshop Template</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <style>
    html, body, div, p {margin:0; padding:0;}
    .box {width: 100px; height: 100px; padding: 1em; position:absolute; background-color:white; border:solid 1px;}
    .box1 {top:30%; left:5%; z-index:10;}
    .box2 {top:30%; left:25%; z-index:20;}
    .box3 {top:30%; left:45%; z-index:30;}
    .box4 {top:30%; left:65%; z-index:40;}
    .box5 {top:30%; left:85%; z-index:50;}

    .image{
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
      z-index: 100;
    }
</style>
</head>
<body>
    <div class="draggable resizable box box1">
        <p></p>
    </div>
    <div class="draggable resizable box box2">
        <p></p>
    </div>
    <div class="draggable resizable box box3">
        <p></p>
    </div>
    <div class="draggable resizable box box4">
        <p></p>
    </div>
    <div class="draggable resizable box box5" id="hover5">
        <p></p>
    </div>
    <!--jquery-->
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script>
        var imgarray = ['1.png','2.png'];
        var windowWidth = window.width;
        var windowHeight = window.height;


      //   for(i=0; i<10; i++){
      //
      //     var randWidth = Math.floor((Math.random()*windowWidth))
      //     var randHeight = Math.floor((Math.random()*windowHeight))
      //
      //   $('#hover5').hover(function(){
      //       $(document.body).append("<div class='image'>111</div>");
      //       $(".image").addClass('image1');
      //       $(".image[i]").css('left', randWidth);
      //       $(".image[i]").css('top', randHeight);
      //       // $(".image[i]").css('background-color', #cccccc);
      //
      //   }, function() {
      //
      //   });
      // }

      function SetupDisplay (i) {
       var image = ".image " + i;
       $(image).css('left',randWidth );
      }

      $('#hover5').hover(function(){

        for(i=0; i<10; i++){

          var randWidth = (Math.random() * 1000) + 1
          var randHeight = (Math.random() * 600) + 1

          $(document.body).append("<div class='image'>111</div>");
          $(".image").addClass('image1');
          $(".image1").css('left',randWidth );
          // $(".image1").css('top', randHeight);
          // $(".image[i]").css('background-color', #cccccc);

        }
      }, function() {

      });



    </script>
</body>
</html>

Answer 1

现在可以正常工作了，但是您正在将盒子彼此顶着移动，因此看不到它们。

https://jsfiddle.net/9o8m4tuh/

      $('.box').hover(function(){
          var randWidth = (Math.random() * 1000) + 1

          var $elem = $("<div class='image'>111</div>");
          $elem.css('left',randWidth );          
          $(document.body).append($elem)
      });

从目录jquery放置随机图像

1 个答案: