javascript - 如何在 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标签也需要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>