iPadで左から右へスライドするような画像をHTMLで読み込む方法

Question

iPad用のWebページがあります。ページ上のグラフは、通常のプレゼンテーションのように左から右にスライドするようにしてください。多くのチュートリアルでは、次のボタンに画像ギャラリーのようなスライドショーがありますが、画像が読み込まれるときに左から右にスライドする必要があります。以下は

私のHTMLコード

 <div id="container"> 
     <div id="index" class="root_panel"> 
     <div id="image"><a href="#page_one"> <img src="image/startbutton.png" />  

     </a> 
     </div> 
     </div> 
     <div id="page_one" class="panel"> 
      <div class="main_heading">Overview</div> 
      <div class="menu"> 
       <ul> 
        <li class="stix"></li> 
        <li><a href="#page_one"><img src="image/overview_active.png" /></a> </li> 
        <li class="stix"></li> 
        <li><a href="#page_two"><img src="image/strategy.gif"/></a></li> 
        <li class="stix"></li> 
        <li><a href="#"><img src="image/draxxin.gif"/></a></li> 
        <li class="stix"></li> 
        <li><a href="#"><img src="image/excede.gif"/></a></li> 
        <li class="stix"></li> 
        <li><a href="#"><img src="image/results.gif"/></a></li> 
        <li class="stix"></li> 
        <li><a href="#"><img src="image/reference.gif"/></a></li> 
        <li class="stix"></li> 
       </ul> 
      </div> 
      <div class="rightclass"><img src="image/pageone_image.png"/></div> 
      <div> 

Answer 1

はあなたが0PXとオーバーフローの幅をコンテナ内のDOMに挿入し、その後非同期で画像を読み込むことができます：隠されました。次に、コンテナの幅を左から右にアニメートします。

イメージタグを削除し、ids（「page_one」、「page_two」など）を含むタグにIDを挿入する必要があります。また、aタグはdisplay：blockである必要があります。

jQueryを使用して

：私は、MacのSafariでそのHTMLページをロードする場合、これらのグラフは、表示取得されるようにし

<div id="container" style="width:0px;overflow:hidden;"></div> 

<script type="text/javascript"> 

     //function to handle our images 
     function slideImage(container, imagePath){ 
      container = $(container);   
      var img = new Image(); 
      $(img).load(function() { 
       container.animate({width:'100%'}, 500); 
      }) 
      .attr('src', imagePath) 
      .appendTo(container); 
     } 

     slideImage('#page_one', 'image/overview_active.png'); 
     slideImage('#page_two', 'image/strategy.png'); 
</script>