Question

我有这个javascript代码，让div随机移动网页，但我不明白如何使它不连续流动，就像用户点击然后移动然后停在那里，无论何时点击再次它移动到另一个随机位置，5次后它显示一条消息并消失。我没有得到如何使这个动画不像流动，而是像从树上落下的叶子。

这里是jsfiddle：JSFIDDLE

下面是javascript代码：

$(document).ready(function(){
animateDiv();

});

function makeNewPosition(){

   // Get viewport dimensions (remove the dimension of the div)
   var h = $(window).height() - 50;
   var w = $(window).width() - 50;

   var nh = Math.floor(Math.random() * h);
   var nw = Math.floor(Math.random() * w);

   return [nh,nw];    

   }

  function animateDiv(){
  var newq = makeNewPosition();
  var oldq = $('.a').offset();
  var speed = calcSpeed([oldq.top, oldq.left], newq);

   $('.a').animate({ top: newq[0], left: newq[1] }, speed, function(){
    animateDiv();        
    });

   };

  function calcSpeed(prev, next) {

   var x = Math.abs(prev[1] - next[1]);
   var y = Math.abs(prev[0] - next[0]);

   var greatest = x > y ? x : y;

   var speedModifier = 0.1;

   var speed = Math.ceil(greatest/speedModifier);

   return speed;

   }

Answer 1

我会使用CSS3 transitions，它们的硬件加速意味着更流畅的动画：

$(document).ready(function(){

    var counter = 0;
    
    $('.a').click( function () {
        if ( ++counter < 5 ) {
            var pos =  makeNewPosition();
            this.style.left = pos[1] +'px';
            this.style.top  = pos[0] +'px';
        }
        else if ( counter = 5 ) {
            this.style.display = 'none';
            alert( 'Your message' );
        }
    });
});

function makeNewPosition(){
    
    // Get viewport dimensions (remove the dimension of the div)
    var h = $(window).height() - 50;
    var w = $(window).width() - 50;
    
    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);
    
    return [nh,nw];    
    
}

div.a {
  width : 50px;
  height: 50px;
  background-color: red;

  position: fixed;      
  left    : 0px;
  top     : 0px;
  -webkit-transition: left 2s, top 2s;
     -moz-transition: left 2s, top 2s;
       -o-transition: left 2s, top 2s;
          transition: left 2s, top 2s;
    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='a'></div>

Answer 2

animateDiv函数在最后调用自己，所以一旦它到达目的地，它就会选择一个新的目的地然后去那里。这里删除了递归回调：

function animateDiv(){
  var newq = makeNewPosition();
  var oldq = $('.a').offset();
  var speed = calcSpeed([oldq.top, oldq.left], newq);

  $('.a').animate({ top: newq[0], left: newq[1] }, speed);
};

还有一个更新的小提琴，现在需要点击框来设置动画：http://jsfiddle.net/Xw29r/3975/

Answer 3

像this之类的东西？

var isStart = true;
$(".a").click(function () {
    animateDiv(isStart);
});

function makeNewPosition() {

    // Get viewport dimensions (remove the dimension of the div)
    var h = $(window).height() - 50;
    var w = $(window).width() - 50;

    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);

    return [nh, nw];

}

function animateDiv() {
    var newq = makeNewPosition();
    var oldq = $('.a').offset();
    var speed = calcSpeed([oldq.top, oldq.left], newq);
    if (isStart) {

        $('.a').animate({
            top: newq[0],
            left: newq[1]
        }, speed, function () {
            animateDiv();
        });
        isStart = false;
    } else {
        $('.a').stop();
        isStart = true;
    }


};

function calcSpeed(prev, next) {

    var x = Math.abs(prev[1] - next[1]);
    var y = Math.abs(prev[0] - next[0]);

    var greatest = x > y ? x : y;

    var speedModifier = 0.1;

    var speed = Math.ceil(greatest / speedModifier);

    return speed;

}

div.a {
width: 50px;
height:50px;
 background-color:red;
position:fixed;
    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class='a'></div>

随机可点击的div在网页上移动

3 个答案: