0

我用响应式脚本创建了雪花。一切似乎都很好,没有问题。但我想增强薄片的方向,比如从左到右、从右到左、从上到下。我试过了,但我不确定我在哪里做错了。

这是小提琴

Javascript:

        var fallingSpeed = Math.floor(Math.random() * 5 + 1);
            var movingDirection = Math.floor(Math.random() * 2);
            var currentTop = parseInt(jQuery(this).css('top'));
            var currentLeft = parseInt(jQuery(this).css('left'));
            jQuery(this).css('top', currentTop + fallingSpeed);
      alert(currentLeft);
//
      //alert(movingDirection);
                if (movingDirection === 0) {
                    jQuery(this).css('left', currentLeft + fallingSpeed);
                } else {
                    // set the snow move to left
                    jQuery(this).css('left', currentLeft + -(fallingSpeed));
                }

如何将薄片从左到右和从右到左移动?任何建议都会很棒。

谢谢。

4

1 回答 1

1

试试stepjquery animate的回调函数:

$(function(){
  var drop = $('.drop').detach();
  function create(){
    var clone = drop
      .clone()
      .appendTo('.container')
      .css('left', Math.random()*$(document).width()-20)
    .html('*')
      .animate(
                {'top': $(document).height()-20},
          {
              duration: Math.random(1000)+8000,
              complete:function(){
                 $(this).fadeOut(200,function(){$(this).remove();}); 
               },
              step:function (currentTop){
                                    var fallingSpeed = Math.floor(Math.random() * 5 + 1);
            var movingDirection = Math.floor(Math.random() * 2);
            var currentTop = parseInt(jQuery(this).css('top'));
            var currentLeft = parseInt(jQuery(this).css('left'));
            jQuery(this).css('top', currentTop + fallingSpeed);

                if (movingDirection === 0) {
                    jQuery(this).css('left', currentLeft + fallingSpeed);
                } else {
                    // set the snow move to left
                    jQuery(this).css('left', currentLeft + -(fallingSpeed));
                }
              }
          });
  }

演示

于 2013-10-12T13:49:32.770 回答