Question

基本上我有一个从左到右滚动的图像横幅。我用jQuery（下面粘贴的代码）工作得很好但是它可能非常紧张，客户希望它更顺畅。因此经过一些研究后，最好的方法是使用CSS3（可能应该从这里开始）。我没有使用除了border-radius之类的基础知识以外的CSS3，所以必须阅读。在看了一些例子后，我能够尝试制作滚动，但是我也无法使用jQuery。

预期效果：

从'向右'慢慢滚动'永远'
当鼠标悬停在它上面时，它会停止滚动

我使用以下jQuery执行此操作：

$(document).ready(function() {
    var $scrollMe = $('.ScrollMe');

$scrollMe.hover(stopBannerAnimation)
$scrollMe.mouseout(startBannerAnimation)

function stopBannerAnimation() 
{
    $(this).stop();
}

function startBannerAnimation()
{
    /*if (Modernizr.csstransitions) 
    {
        $scrollMe.css('left', '{xen:calc '{$scrollerWidth} * 100'}px');
    }
    else*/
    {
        $scrollMe.animate(
            {left: -{$scrollerWidth}}, 
            {xen:calc '{$scrollerWidth} * 60'}, 
            'linear',
            function(){ 
                if ($(this).css('left') == '{$scrollerWidth}px') 
                { 
                    $(this).css('left', 0); 
                    startBannerAnimation(); 
                } 
            }
        );
    }
}
startBannerAnimation();

$('.ScrollMe ol').clone().appendTo('.ScrollMe');
});

在使用CSS3处理实际滚动时，有人可以帮助我获得相同的功能，所以它更顺畅（理论上）吗？

Answer 1

我就是这样做的，动画速度使用5秒钟：

第1步：编写CSS3过渡类

.ScrollMe{
   -webkit-transition:left 5s ease;  // here the animation is set on 5 seconds
   -moz-transition:left 5s ease;  // adjust to whatever value you want
   -o-transition:left 5s ease;
   transition:left 5s ease;}
}

第2步：设置jquery以切换左侧位置

function DoAnimation () {

  var $scrollMe = $('.ScrollMe');

  if ($scrollMe.offset().left === 0) {
      // I imagine you calculate $scrollerWidth elsewhere in your code??
      $scrollMe.css('left', $scrollerWidth); 
  } else {
      $scrollMe.css('left', 0);
  }

  setTimeout(function () {
     if (LaunchAnimation === true) { DoAnimation(); } 
  }, 5000); // here also assuming 5 seconds; change as needed

}

第3步：控制动画开始/停止

    var LaunchAnimation = true;

    $(document).ready(function() {

      $('.ScrollMe').mouseover(function () {
         //this stops the div from moving
         if (LaunchAnimation === true) {
            $(this).css('left', $(this).offset().left);
            LaunchAnimation = false; 
         }
      });

      $('.ScrollMe').mouseleave(function() { 
         DoAnimation();             
         LaunchAnimation = true;
      });   
}

这样，你让浏览器的CSS渲染引擎控制div的速度和移动的平滑性，并且你只使用jquery作为触发机制。

希望这有帮助。

使用CSS3进行平滑的慢速滚动

1 个答案: