<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery倾斜分割鼠标滚动切换代码 - 网页模板</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div class="skw-pages">
<div class="skw-page skw-page-1 active">
<div class="skw-page__half skw-page__half--left">
<div class="skw-page__skewed">
<div class="skw-page__content"></div>
</div>
</div>
<div class="skw-page__half skw-page__half--right">
<div class="skw-page__skewed">
<div class="skw-page__content">
<h2 class="skw-page__heading">jQuery倾斜分割鼠标滚动切换代码</h2>
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</div>
</div>
</div>
<div class="skw-page skw-page-2">
<div class="skw-page__half skw-page__half--left">
<div class="skw-page__skewed">
<div class="skw-page__content">
<h2 class="skw-page__heading">Page 2</h2>
<p class="skw-page__description">Nothing to do here, continue scrolling.</p>
</div>
</div>
</div>
<div class="skw-page__half skw-page__half--right">
<div class="skw-page__skewed">
<div class="skw-page__content"></div>
</div>
</div>
</div>
<div class="skw-page skw-page-3">
<div class="skw-page__half skw-page__half--left">
<div class="skw-page__skewed">
<div class="skw-page__content"></div>
</div>
</div>
<div class="skw-page__half skw-page__half--right">
<div class="skw-page__skewed">
<div class="skw-page__content">
<h2 class="skw-page__heading">Page 3</h2>
<p class="skw-page__description">The end is near, I promise!</p>
</div>
</div>
</div>
</div>
<div class="skw-page skw-page-4">
<div class="skw-page__half skw-page__half--left">
<div class="skw-page__skewed">
<div class="skw-page__content">
<h2 class="skw-page__heading">Page 4</h2>
<p class="skw-page__description">Ok, ok, just one more scroll!</p>
</div>
</div>
</div>
<div class="skw-page__half skw-page__half--right">
<div class="skw-page__skewed">
<div class="skw-page__content"></div>
</div>
</div>
</div>
<div class="skw-page skw-page-5">
<div class="skw-page__half skw-page__half--left">
<div class="skw-page__skewed">
<div class="skw-page__content"></div>
</div>
</div>
<div class="skw-page__half skw-page__half--right">
<div class="skw-page__skewed">
<div class="skw-page__content">
<h2 class="skw-page__heading">Epic finale</h2>
<p class="skw-page__description">story the end!</p>
</div>
</div>
</div>
</div>
</div>
<script src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>
<script>
$(document).ready(function () {
var curPage = 1;
var numOfPages = $('.skw-page').length;
var animTime = 1000;
var scrolling = false;
var pgPrefix = '.skw-page-';
function pagination() {
scrolling = true;
$(pgPrefix + curPage).removeClass('inactive').addClass('active');
$(pgPrefix + (curPage - 1)).addClass('inactive');
$(pgPrefix + (curPage + 1)).removeClass('active');
setTimeout(function () {
scrolling = false;
}, animTime);
}
;
function navigateUp() {
if (curPage === 1)
return;
curPage--;
pagination();
}
;
function navigateDown() {
if (curPage === numOfPages)
return;
curPage++;
pagination();
}
;
$(document).on('mousewheel DOMMouseScroll', function (e) {
if (scrolling)
return;
if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
navigateUp();
} else {
navigateDown();
}
});
$(document).on('keydown', function (e) {
if (scrolling)
return;
if (e.which === 38) {
navigateUp();
} else if (e.which === 40) {
navigateDown();
}
});
});
</script>
</body>
</html>
jQuery倾斜分割鼠标滚动切换代码.zip （14个子文件） 
jQuery倾斜分割鼠标滚动切换代码 
jQuery倾斜分割鼠标滚动切换代码.jpg 52KB jiaoben3794 css 
default.css 6KB styles.css 4KB img 2.jpg 111KB 1.jpg 207KB 3.jpg 148KB 5.jpg 122KB 4.jpg 109KB fonts icomoon.woff 1KB
icomoon.svg 2KB icomoon.eot 2KB icomoon.ttf 1KB
index.html 4KB js jquery-2.1.1.min.js 82KB资源评论
