0

シングルの画像を2つ表示する必要がありますmouseover。したがって、私mouseoverが画像にアクセスすると、最初に画像が表示され、次に5000の時間遅延で、同じホバーで画像を表示する必要があります。mouseout元の画像 が表示されます。

私はJavaScriptとjQueryにあまり精通していません。
誰かがこれを行う方法について私にいくつかのアイデアを教えてもらえますか？

私がしたことは、

 $('.image1').mouseover(function() {

    setInterval($(this).removeClass(.image1).addClass('image-over1'),5000);
    $(this).removeClass(.image1).addClass('image-over2');

    });
   $('.image1').mouseout(function() {
  $(this).removeClass('image-over1');  
    $(this).removeClass('image-over2').addClass(item);
    });


   $('.image1').click(function(){
    document.location='index.php?page='index.php'; 
    })
4

4 に答える 4

0

画像がオンザフライで生成された場合でも、PHPでアニメーションGIFをプログラムで生成することができます-http://php.net/manual/en/function.imagegif.phpを参照してください

于 2010-12-02T11:49:16.860 に答える
0

おそらくあなたはこれらの画像のアニメーションGIFを作成しますか？次に、次のようなコードを使用します： http: //www.netmechanic.com/news/vol3/design_no10.htm

于 2010-12-02T11:43:31.587 に答える
0

まず第一に、あなたのアプローチには問題があると思います。マウスオーバーで要素から"image1"クラスを削除すると、その要素はマウスアウトの$（ "。image1"）セレクターと一致しなくなります。削除する必要がある理由はありますか？そうした場合（つまり、CSSのクラスで無効にする必要のあるものが定義されている場合）、一致させることができる他のセレクターはありますか？

時間遅延に関しては、1.4より大きいjQueryバージョンを使用している場合は、.delay（）関数を使用できます。

$('.image1').mouseover(function() {
 $(this).addClass('image-over1').delay(5000).addClass('image-over2');
});
于 2010-12-02T06:27:16.147 に答える
0

この.hover()関数を使用すると、マウスオーバーとマウスアウトの両方を同時に指定できます。また、setInterval：の関数を作成する必要があります。

$('.image1').hover(function(evt) {

  // mouse over function.

  // DOM Element that got the mouseover.
  var target = evt.target; 

  if (target.timer) {
    clearTimeout(target.timer);
    target.timer = null;
  }

  target.timer = setInterval(function() {

       // $(this) will not work here, since 'this' has changed.
       // depending on your css you shouldn't need to remove the '.image1'
       // class, just make sure .image-over1 and .image-over2 are
       // stronger selectors, or occur after .image1
       $('.image1').addClass('image-over2');    

       // at this point your element will be (just guessing <img>, could be
       // anything really:
       // <img class="image1 image-over1 image-over2" .../>

       // it's absolutely fine for the image to have all those classes as
       // long as your css is correct.       

   }, 5000);

    $('.image1').addClass('image-over1');

}, function(evt) {

   // mouse out function.

  // DOM Element that got the mouseout.
  var target = evt.target; 

  if (target.timer) {
    clearTimeout(target.timer);
    target.timer = null;
  }

   $('.image1').removeClass('image-over1');
   $('.image1').removeClass('image-over2');

 });


$('.image1').click(function(){ document.location='index.php?page='index.php'; })
于 2010-12-02T06:27:46.250 に答える