网页整屏滑动效果，添加窗口大小变化监听

最新推荐文章于 2022-01-05 17:28:02 发布

iovexorg

最新推荐文章于 2022-01-05 17:28:02 发布

阅读量660

点赞数

分类专栏： WEB前端

本文链接：https://blog.csdn.net/github_15094005/article/details/40079571

版权

WEB前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

摘取网络上鼠标切屏代码，

添加窗口变化监听

<!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>

iovexorg

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页整屏滑动效果，添加窗口大小变化监听

摘取wan网站整屏滑动效果+自定义滚动条样式html { overflow: hidden; }body{margin:0;padding:0} $(document).ready(function() { var windowHeight = $(window).height(); var aTop = [wind
复制链接

扫一扫