1

基本上我有一个从左到右滚动的图像横幅。我让它在 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 处理实际滚动时帮助我获得相同的功能，使其更平滑（理论上）吗？

4

1 回答 1

2

这就是我的做法，使用 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

}

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

    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 作为触发机制。

希望这可以帮助。

于 2012-03-11T22:53:32.463 回答