如何在HTML中加载图像，例如iPad网站从左到右滑动

Question

我有 iPad 的网页，上面有图形，我希望页面上的图表应该像我们通常在演示文稿中看到的那样从左到右加载幻灯片，我已经看过很多教程，但他们有滑动显示，如下一个按钮上的图库，但我希望当图像加载时，它应该从左向右滑动。

下面是我的 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 且 overflow：hidden 的容器中的 dom。然后，从左到右对容器的宽度进行动画处理。

您需要删除图像标签，并将 ID（如"page_one"、"page_two"等）放在包含它们的标签上。a标签也需要显示：块;

使用 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>