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

}

ステップ 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 をトリガー メカニズムとしてのみ使用します。

お役に立てれば。

于 2012-03-11T22:53:32.463 に答える