1

我有带有图形的 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>
4

1 回答 1

0

您可以异步加载图像，然后将其插入到宽度为 0px 并溢出：隐藏的容器内的 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 回答