私は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"><img> 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>