如何在ipad网站上滚动页面

时间:2012-04-10 08:52:54

标签: ipad html5

我有一个ipad的网站我想用手指滚动页面,就像我们在iphone或ipad应用程序中那样,但问题是,当我滚动页面时,它不会覆盖整个区域,就像它滚动到半页

     <!DOCTYPE HTML>
     <html>
     <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <meta name="keywords" content="" />
     <meta name="description" content="" />
     <title>Bovine Respiratory Disease</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <link href="css/overviewstyle.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery.touchSwipe-1.2.5.js"></script>
    <link rel="stylesheet" href="css/jpreloader.css" />
    <script src="js/jpreLoader.js"></script>
    <!--fonts-->
    <style type="text/css">


        @font-face {
font-family: 'TradeGothicBdCnOb';
src: url('trade_gothic_bold_condensed_no._20_oblique-webfont.eot');
src: url('trade_gothic_bold_condensed_no._20_oblique-webfont.eot?#iefix') format('embedded-opentype'),
     url('trade_gothic_bold_condensed_no._20_oblique-webfont.woff') format('woff'),
     url('trade_gothic_bold_condensed_no._20_oblique-webfont.ttf') format('truetype'),
     url('trade_gothic_bold_condensed_no._20_oblique-webfont.svg#TradeGothicBdCnOb') format('svg');
font-weight: normal;
font-style: normal;

    }

   </style>
   <!--[if IE]>
   <script>
   document.createElement('header');
   document.createElement('footer');
   document.createElement('section');
   document.createElement('nav');
  </script>
   <![endif]-->


     </head>
    <body>
    <header>
        <ul id="banner">    
            <li><a href="#overview"><img src="assets/overview1.png" alt=""/></a></li>
            <li><a href="#"><img src="assets/strategy1.png" alt=""/></a></li>
            <li><a href="#draxxinslide"><img src="assets/draxxin_1.png" alt=""/></a></li>
            <li><a href="#draxxin_slide2"><img src="assets/excede1.png" alt=""/></a></li>
            <li><a href="#"><img src="assets/results1.png" alt=""/></a></li>                                                                                <li><a href="#"><img src="assets/wrap_up_2.png" alt=""/></a></li>

        </ul>
        </header>
          <div id="swipeBox" ontouchstart="touchStart(event,'swipeBox');" ontouchend="touchEnd(event);" ontouchmove="touchMove(event);" ontouchcancel="touchCancel(event);">
         <section id="container">
         <section id="overview" class="panel">   <!-- Start of Page one -->
         <div id="section_one"> 
         <div><h1>Overview</h1></div>   
    <div>
        <h2>Bovine Respiratory Disease (BRD)</h2>
    </div>
            </div>
         <div id="section_content">
    <div class="content"><img src="assets/box.png" alt=""/>
     <div class="font_class1">Economic Loss</div>
        <ul>
        <li> $1 Billion each year</li>
        <li> From death, reduced feed efficiency and treatment costs </li>
        <li> Loss $57.48 - $239.69 per head </li>
        </ul>
       </div>

    <div class="content">
        <img src="assets/box.png" alt=""/>
      <div class="font_class">Bacterial Culprits</div>
        <ul>            
        <li> Mannheimia haemolytica</li>
        <li> Pasteurella multocida </li>
        <li> Histophilus somni</li>
        <li> Mycoplasma bovis</li>
        </ul>
    </div>
        </div>
       </section> <!-- End of Page one -->

       <section id="draxxinslide" class="panel"> 
       <div id="section_two">   
        <div><h1>Draxxin</h1></div> 
        <h2>Draxxin keeps working for up to 14 days</h2>
        </div>
         <div id="section_content_two">
    <div class="arrow"><img src="assets/arrow.png" alt=""/></div>
         <div class="paragraph">Treats four major pathogens including <i>Mycoplasma Bovis</i></div>
    <div class="arrow1"><img src="assets/arrow.png" alt=""/></div>
            <div class="paragraph1">Decreases total number of treatments</div>

       <div class="arrow2"><img src="assets/arrow.png" alt=""/></div>
       <div class="paragraph2">Reduces labor and treatment costs</div>

   </div>
   <div id="section_card"><img src="assets/card.png"/></div>
  </section>
   <!--
   <div id="draxxin_slide2" class="panel"> 
   <div id="section_three">     
        <h2>Draxxin extends your PMIs and PTIs for a greater return on your investment...</h2>
   </div>
   <div id="section_content_three">
    <div class="draxxin_table_structure"><img src="assets/table_structure.png" alt=""/></div>
    <div class="draxxin_table"><img src="assets/draxxin_table_img_1.png" alt=" "/></div>
    <div class="draxxin_table_1"><img src="assets/draxxin_table_img_2.png" alt=""/>  </div>
    </div>
    </div>-->
    <!-- This section is for Splash Screen -->
    <div id=jSplash>
<section class=selected>
    <h1>jPreLoader</h1>
    <h2>A Loading Screen to preload images & content<br/>
    for website using jQuery</h2>
</section>
<section>
    <p>Create your own <br/>
    <span style="font-size:30px">Splash Screen</span>.</p>
</section>
<section>
    <p>Customize Progress Bar and Progress Percentage <br/>
    <span style="font-size:30px">using CSS</span>.</p>
</section>
<section>
    <p>Preload all images in <br/> 
    <span style="font-size:25px">&lt;img&gt; tag</span> + 
    <span style="font-size:25px">CSS background-image</span>.</p>
</section>
     </div>
    <!-- End of Splash Screen -->
    <footer>
    <div class="footer_center">
<ul>
    <li><a onClick="" href="#"><img src="assets/back_light_blue_button_copy.png" alt=""/></a></li>
    <li><a href="#"><img src="assets/home_light_blue_button_copy.png" alt=""/></a></li>
    <li><a href="#"><img src="assets/forward_light_blue_button_copy.png" alt=""/></a></li>
</ul>
    </div>
    </footer>
    </section> <!-- end of container div-->
    </div>
   <script>


        //Assign handlers to the simple direction handlers.
        var swipeOptions=
        {
            swipe:swipe,
            threshold:0,

            fingers:2
        }

        $(function()
        {           
            //Enable swiping...
            $("#panel").swipe( swipeOptions );
        });




        function swipe(event)
        {
            $("#panel").text("You swiped " + direction);
        }




     </script>
         <script>
        $(document).ready(function() {
  var timer;

//calling jPreLoader function with properties
$('body').jpreLoader({
    splashID: "#jSplash",
    splashFunction: function() {  //passing Splash Screen script to jPreLoader
        $('#jSplash').children('section').not('.selected').hide();
        $('#jSplash').hide().fadeIn(800);

        timer = setInterval(function() {
            splashRotator();
        }, 3000);
    }
}, function() { //jPreLoader callback function
    clearInterval(timer);
    $('footer').animate({"bottom":0}, 500);
    $('header').animate({"top":0}, 800, function() {
        $('#container').fadeIn(1000);
    });
});
   });
        <!-- End of jPreLoader script -->

     function splashRotator(){
var cur = $('#jSplash').children('.selected');
var next = $(cur).next();

if($(next).length != 0) {
    $(next).addClass('selected');
} else {
    $('#jSplash').children('section:first-child').addClass('selected');
    next = $('#jSplash').children('section:first-child');
}

$(cur).removeClass('selected').fadeOut(800, function() {
    $(next).fadeIn(800);
});
   }
   </script>


  </body>
    </html>

代码结束

以下是滚动

的脚本
     <script type="text/javascript">
        $(function() {
            $('ul a').bind('click',function(event){
                var $anchor = $(this);
                  $('html, body').stop().animate({
                    scrollLeft: $($anchor.attr('href')).offset().left
                }, 1000);
                event.preventDefault();
            });
        });
     </script>

1 个答案:

答案 0 :(得分:0)

这可能会有所帮助:

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">