Question

我用响应式脚本创建了雪花。一切似乎都没问题。但是我希望像左那样从左到右，从上到下来增强薄片的方向。我试过了，但我不确定我在哪里犯了这个错误。

以下是 fiddle

使用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));
                }

如何从左到右，从右到左移动薄片？任何建议都会很棒。

感谢。

Answer 1

尝试使用jquery animate的step回调函数：

$(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));
                }
              }
          });
  }

DEMO

使用jquery动画方向

1 个答案: