摘取網絡上鼠標切屏代碼，
添加窗口變化監聽
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Ban YanNing" />
<title>網頁整屏滑動效果</title>
<style>
html { overflow: hidden; }
body{margin:0;padding:0}
</style>
<script src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" src="nicescroll.js"></script>
</head>
<body>
<div id="container" style="height:2000px;">
<div style="background:#66C280;" class="pager"></div>
<div style="background:#3B86D8;" class="pager"></div>
<div style="background:#9931B9;" class="pager"></div>
</div>
<script>
$(document).ready(function() {
var windowHeight = $(window).height();
var aTop = [windowHeight * 0, windowHeight * 1, windowHeight * 2, windowHeight * 3];
$(".pager").css("height", windowHeight + "px");
iPagerCount = $(".pager").length;
iPageNumber = 0;
var sTop = $(window).scrollTop();
if (sTop >= aTop[0] && sTop < aTop[1]) {
iPageNumber = 0;
}
if (sTop >= aTop[1] && sTop < aTop[2]) {
iPageNumber = 1;
}
if (sTop >= aTop[2] && sTop < aTop[3]) {
iPageNumber = 2;
}
if (sTop >= aTop[3]) {
iPageNumber = 3;
}
//美化瀏覽器的滾動條
//$("html").niceScroll({
// touchbehavior:false,cursorcolor:"#0966ce",cursoropacitymax:1,cursorwidth:8,horizrailenabled:true,cursorborderradius:5,autohidemode:true,background:'none',cursorborder:'solid 1px #0966ce'
//});
$("#container").click(function() {
pageDown();
});
//滑動滾動條翻屏效果
$("html,body").bind("mousewheel", function(event, intDelta) {
var $this = $(this),
timeoutId = $(this).data('timeoutId');
if (timeoutId) {
clearTimeout(timeoutId);
}
$this.data('timeoutId', setTimeout(function() {
intDelta > 0 ? pageUp() : pageDown();
$this.removeData('timeoutId');
$this = null;
}, 150));
return false;
});
window.onresize = function() {
windowHeight = $(window).height();
aTop = [windowHeight * 0, windowHeight * 1, windowHeight * 2, windowHeight * 3];
$(".pager").css("height", windowHeight + "px");
slide(aTop[iPageNumber]);
};
function pageUp() {
iPageNumber = iPageNumber <= 0 ? 0 : iPageNumber - 1;
slide(aTop[iPageNumber]);
}
function pageDown() {
iPageNumber = iPageNumber >= iPagerCount - 1 ? iPageNumber : iPageNumber + 1;
slide(aTop[iPageNumber]);
}
function slide(length) {
$("body,html").stop().animate({
scrollTop: length
}, windowHeight, 'easeOutExpo');
}
//擴展動畫
$.extend($.easing, {
easeOutExpo: function(e, f, a, h, g) {
return (f == g) ? a + h : h * (-Math.pow(2, -10 * f / g) + 1) + a
},
easeOutBounce: function(x, t, b, c, d) {
if ((t /= d) < (1 / 2.75)) {
return c * (7.5625 * t * t) + b;
} else if (t < (2 / 2.75)) {
return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
} else if (t < (2.5 / 2.75)) {
return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
} else {
return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
}
}
});
});
</script>
</body>
</html>
