1

グラフィックを含む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>
4

1 に答える 1

0

画像を非同期的に読み込んでから、幅 0px および overflow:hidden でコンテナ内の dom に挿入できます。次に、コンテナーの幅を左から右にアニメーション化します。

イメージ タグを削除し、それらを含むタグに ID (「page_one」、「page_two」など) を配置する必要があります。a タグも display:block; である必要があります。

jQuery の使用:

<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>
于 2012-04-27T05:18:50.870 に答える