Question

我有以下jquery代码将矩形从一个地方移动到另一个地方。它有效。

jQuery(function ($) {
    $(document).ready(function () {
        loop_pos = function () {
            var docHeight = $(document).height(),
                docWidth = $(document).width(),
                $div = $('#test'),
                divWidth = $div.width(),
                divHeight = $div.height(),
                heightMax = docHeight - divHeight,
                widthMax = docWidth - divWidth;

            $div.css({
                left: Math.floor(Math.random() * widthMax),
                top: Math.floor(Math.random() * heightMax)
                // here
            });
        }
        // or here
    });
});

现在，我想让这个矩形在无限循环中自动改变它的位置。我试着调用函数loop_pos，在//这里//或者这里，但它不起作用，我不知道该怎么做。

另一种解决方案可能是setTimeout（），但我无法使其工作。请一点帮助。感谢。

Answer 1

首先，重构，以便在每次函数调用时不计算宽度和高度。

然后使用setInterval每隔n毫秒调用一个函数：

jQuery(function($) {
     // No need for document.ready cause jQuery is made to execute this function when the doc is ready.
     // initialize variables
     var $div = $('#test'),
     delay = 1000, // ms
     docHeight,
     docWidth,
     divWidth,
     divHeight,
     heightMax,
     widthMax;
     function onResize(){
         //update them
         docHeight = $(document).height();
         docWidth = $(document).width();
         divWidth = $div.width();
         divHeight = $div.height();
         heightMax = docHeight - divHeight,
         widthMax = docWidth - divWidth;
     }
     function loop_pos(){
         $div.css({
            left: Math.floor(Math.random()*widthMax),
            top: Math.floor(Math.random()*heightMax)
            // here
         });
      }
      // Calculate for the first time
      onResize();
      // Add event listener
      $(window).resize(onResize);
      // run loop
      setInterval(loop_pos, delay); // 1000 ms = 1 second
});

见小提琴：

http://jsfiddle.net/5f4quu8u/

Answer 2

"or here"是您的答案，只需重构您的代码，以防止在不需要的情况下运行您的DOM：

<强> jsFiddle demo

$(document).ready(function() {

    var $div = $('#test'), x, y;

    function getSizes(){
        x = $(document).width() - $div.width();
        y = $(document).height() - $div.height();
    } 
    function loop_pos(){
        $div.css({ // or use `.animate` instead of `.css`
            left: ~~(Math.random() * x),
            top:  ~~(Math.random() * y)
        });
    }

    getSizes();                         // Get them immediately
    $("window").on("resize", getSizes); // Update values on Win. resize
    setInterval(loop_pos, 1000);

});

Answer 3

好吧，我首先将您的代码移到$（document）.ready（） - part之外，然后将其声明为一个单独的函数。

function moveDiv(){
   var docHeight = $(document).height();
   docWidth = $(document).width();
   $div = $('#test');
   divWidth = $div.width();
   divHeight = $div.height();
   heightMax = docHeight - divHeight;
   widthMax = docWidth - divWidth;

   $div.css({
       left: Math.floor(Math.random()*widthMax),
       top: Math.floor(Math.random()*heightMax)
   });
}

然后你可以在javascript中使用SetInterval函数。

$(document).ready(function() {
    var delay = 1*1000; //would move the div every 1 second
    setInterval( moveDiv , delay );
});

我认为应该这样做。（鉴于您的代码在我看来应该可行！）

jquery无限循环（移动div位置）

3 个答案: