2/3 横スライド：ホイール対応

JavaScript

jQuery 横スライド：ホイール対応

20120204224848

HTML/CSS

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style type="text/css">
<!--
* {
	margin: 0;
	padding:0;
	
}

body {
	width:6400px;/* =ページ幅×ページ数 */
	font-family:Arial, Helvetica, sans-serif;
	background-color:#000;
	text-shadow: 1px 1px 2px #666;	
	position:absolute;
	top:0px;
	left:0px;
	bottom:0px;
}

.page {
	width:1600px;/* =ページ幅 */
	height:100%;
	float:left;	
}


h1 { 
   color: #333;
   font-size: 25px; a
   margin:610px 20px 0 0;
   text-align:right; 
   text-shadow:1px 1px 1px #fff;
   letter-spacing:-1px; 
  
}

.nav {
	height:40px;
	background-color:#000;
	padding:5px 15px 5px 0;
	text-align:right;
}

.nav li {
	font-size:14px;
	line-height:3;
	display:inline-block;
}

.nav li,li a {
	color:#FFF;
	text-decoration:none;
}

.content {
	margin-left:30px;
}


#page1 {
	width:1600px;/* =ページ幅 */
	height:700px;
	background-color: #000;
	background-image:url(images/01.jpg);
	background-repeat:no-repeat;
}

#page2 {
	width:1600px;/* =ページ幅 */
	height:700px;
	background-color: #000;
	background-image:url(images/02.jpg);
	background-repeat:no-repeat;
}

#page3 {
	width:1600px;/* =ページ幅 */
	height:700px;
	background-color: #000;
	background-image:url(images/03.jpg);
}

#page4 {
	width:1600px;/* =ページ幅 */
	height:700px;
	background-color: #000;
	background-image:url(images/04.jpg);
	background-repeat:no-repeat;
}


-->
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript">
$(function() {
	function scrollTo(to) {
		$('html, body')
				.stop()
				.animate({
					scrollLeft: $(to).offset().left
				}, 500, 'linear');
	}
	$('.pager').bind('click',function(ev){
		scrollTo($(this).attr('href'));
	});
	$('html').mousewheel(function(ev, mov) {
		if ($('html, body').is(':animated')) {
			return false;
		}
		var page = document.location.hash || '#page1';
		var target = null;
		if (mov > 0) {
			target = $(page).prev('.page').attr('id');
		} else if (mov < 0) {
			target = $(page).next('.page').attr('id');
		}
		if (target) {
			scrollTo('#'+target);
			document.location.hash = '#'+target;
		}
		ev.preventDefault(); // 縦スクロールはさせない
    });
});


</script>

</head>

<body>
<div id="container">
<!--１ページ目-->
<div class="page" id="page1">
<ul class="nav">
<li>Page1・</li>
<li><a href="#page2" class="pager">Page2・</a></li>
<li><a href="#page3" class="pager">Page3・</a></li>
<li><a href="#page4" class="pager">Page4</a></li>
</ul>

<div class="content">
<h1>Landscape photo of the church</h1>
</div>
</div>

<!--2ページ目-->
<div class="page" id="page2">
<ul class="nav">
<li><a href="#page1" class="pager">Page1・</a></li>
<li>Page2・</li>
<li><a href="#page3" class="pager">Page3・</a></li>
<li><a href="#page4" class="pager">Page4</a></li>
</ul>


<div class="content">
<h1>Landscape photo of the church</h1>
</div>
</div>

<!--3ページ目-->
<div class="page" id="page3">
<ul class="nav">
<li><a href="#page1" class="pager">Page1・</a></li>
<li><a href="#page2" class="pager">Page2・</a></li>
<li>Page3・</li>
<li><a href="#page4" class="pager">Page4</a></li>
</ul>

<div class="content">
<h1>Landscape photo of the church</h1>
</div>
</div>

<!--4ページ目-->
<div class="page" id="page4">
<ul class="nav">
<li><a href="#page1" class="pager">Page1・</a></li>
<li><a href="#page2" class="pager">Page2・</a></li>
<li><a href="#page3" class="pager">Page3</a></li>
<li>・Page4</li>
</ul>

<div class="content">
<h1>Landscape photo of the church</h1>
</div>
</div>
</div>

</body>
</html>