0

画面の幅 100% を占めるように設定された雲の画像があります。「Spritely」プラグインが雲を連続的にパンできるように、パンできるようにしたいのですが、これは「背景画像」ではないため、Spritely は使用していません。これが理にかなっていることを願っています。

画像の私のコード:

   <div id="clouds" style="position:absolute; z-index:99; width:100%; top:56.5%;">
   <div id="clouds1" style="width:auto;overflow:hidden; position:relative; z-index:99; left:0%;">
   <img src="Images/clouds.png" style="width:100%" />
   </div>
   </div>

このように画像を使用すると、ブラウザのサイズに合わせて拡大縮小できます。

誰かがこの画像を継続的にパンする方法を理解するのを手伝ってくれますか?

お時間をいただきありがとうございました！

  • ジェームズ
4

2 に答える 2

0

「視差水平スクロール」という用語を使用してソリューションを検索すると、メリットが得られると思います。

次のようなチュートリアルを見つけることができるはずです

http://www.egstudio.biz/easy-parallax-with-jquery/

レスポンシブになるように調整できます。

于 2013-03-15T23:44:56.920 に答える
0

私はこれとまったく同じ問題を抱えていました。クラウドでは使用しませんでしたが、簡単に実装でき、わずか 4 行のコードで済みます。

HTML

<div class="slideshow">  
        <ul>
            <li><img src="img1.jpg" alt="jQuery" width="350" height="200" /></li>
            <li><img src="img2.jpg" alt="Infinite Slideshow" width="350" height="200" /></li>
            <li><img src="img3.jpg" alt="only 4 lines of code" width="350" height="200" /></li>
            <li><img src="img4.jpg" alt="www.creativejuiz.fr" width="350" height="200" /></li>
        </ul>  
    </div>

CSS

/* slideshow styles */
.slideshow {  
   width: 350px;  
   height: 200px;  
   margin: 3em auto;
   overflow: hidden;
   border: 3px solid #f2f2f2;
}  
.slideshow ul {  
   width: 400%;  
   height: 200px;
   padding:0; margin:0;
   list-style:none;
}  
.slideshow li { float: left; }

JQuery

$(function(){
   setInterval(function(){
      $(".slideshow ul").animate({marginLeft:-350},800,function(){
         $(this).css({marginLeft:0}).find("li:last").after($(this).find("li:first"));
      })
   }, 3500);
});

ソース - http://creativejuiz.fr/blog/doc/infinite-slideshow/

于 2013-04-12T02:59:03.817 に答える