jQueryで作るマウスホイール対応横スライド「jquery.mousewheel.js」

プレビュー

↓別ウィンドウを開いて見る
jquery.mousewheel.js

ポイント

jquery.mousewheel.js

Downloads · brandonaaron/jquery-mousewheel · GitHub

jquery 1.7.2とmousewheel.js ver.2.2：動作×
jquery 1.6.1とmousewheel.js ver.2.2：動作○
jquery 1.7.2とmousewheel.js ver 3.0.6：動作○

コード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jquery.mousewheel.js</title>
<link rel="stylesheet" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/jquery.mousewheel.min.js"></script>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
</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>Page1</h1>
  </div>
  </div>
  
  <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>Page2</h1>
  </div>
  </div>
  
  <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>Page3</h1>
  </div>
  </div>
  
  <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>Page4</h1>
  </div>
  </div>
  
  </div>
</body>
</html>

CSS

@charset "utf-8";

/* ページ設定 */
body {
	width:7680px; /* 1920px × 4 */
	position:absolute;
	top:0;
	left:0;
	bottom:0;
}
.page {
	width:1920px;
	height:100%;
	float:left;
	bottom:0;
}
/* 装飾設定 */
body {
	margin:0;
        font-family:
	  "ヒラギノ角ゴ Pro W3",
	   "Hiragino Kaku Gothic Pro", 
	   "メイリオ", 
	   Meiryo, 
	   Osaka, 
	   "ＭＳ Ｐゴシック", 
	   "MS PGothic", 
	   sans-serif;
}
.nav {
	background-color:#000;
	padding:5px 5px 5px 30px;
}
.nav li {
	display:inline;
}
.nav li, .nav li a, h1 {
	color:#fff;
}
.content {
	margin:0 0 0 30px;
}

#page1 {
	background-color:#2D89F0;
}
#page2 {
	background-color:#01A31C;
}
#page3 {
	background-color:#D44A26;
}
#page4 {
	background-color:#603CBA;
}

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();
    });
});