经验分享程序开发文档资料数据资源其它资源

jQuery倾斜分割鼠标滚动切换代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery倾斜分割鼠标滚动切换代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jQuery倾斜分割鼠标滚动切换代码

HTML代码(index.html):

<!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>
	</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="js/jquery-2.1.1.min.js" type="text/javascript"></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>

CSS代码(styles.css):

*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;}
body{background:#15181A;font-family:"Open Sans",Helvetica,Arial,sans-serif;}
.skw-pages{overflow:hidden;position:relative;height:100vh;}
.skw-page{position:absolute;left:0;top:0;width:100%;}
.skw-page__half{position:absolute;top:0;width:50%;height:100vh;-webkit-transition:-webkit-transform 1s;transition:transform 1s;}
.skw-page__half--left{left:0;-webkit-transform:translate3d(-32.4vh,100%,0);transform:translate3d(-32.4vh,100%,0);}
.skw-page__half--right{left:50%;-webkit-transform:translate3d(32.4vh,-100%,0);transform:translate3d(32.4vh,-100%,0);}
.skw-page.active .skw-page__half{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
.skw-page__skewed{overflow:hidden;position:absolute;top:0;width:140%;height:100%;-webkit-transform:skewX(-18deg);-ms-transform:skewX(-18deg);transform:skewX(-18deg);background:#000;}
.skw-page__half--left .skw-page__skewed{left:-40%;}
.skw-page__half--right .skw-page__skewed{right:-40%;}
.skw-page__content{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-flex-flow:column wrap;-ms-flex-flow:column wrap;flex-flow:column wrap;position:absolute;left:0;top:0;width:100%;height:100%;padding:0 30%;color:#fff;-webkit-transform:skewX(18deg);-ms-transform:skewX(18deg);transform:skewX(18deg);-webkit-transition:-webkit-transform 1s,opacity 1s;transition:transform 1s,opacity 1s;background-size:cover;}
.skw-page__half--left .skw-page__content{padding-left:30%;padding-right:30%;-webkit-transform-origin:100% 0;-ms-transform-origin:100% 0;transform-origin:100% 0;}
.skw-page__half--right .skw-page__content{padding-left:30%;padding-right:30%;-webkit-transform-origin:0 100%;-ms-transform-origin:0 100%;transform-origin:0 100%;}
.skw-page.inactive .skw-page__content{opacity:0.5;-webkit-transform:skewX(18deg) scale(0.95);-ms-transform:skewX(18deg) scale(0.95);transform:skewX(18deg) scale(0.95);}
.skw-page__heading{margin-bottom:15px;text-transform:uppercase;font-size:25px;text-align:center;}
.skw-page__description{font-size:18px;text-align:center;}
.skw-page__link{color:#FFA0A0;}
.skw-page-1 .skw-page__half--left .skw-page__content{background-image:url("../img/1.jpg");}
.skw-page-1 .skw-page__half--right .skw-page__content{background:#292929;}
.skw-page-2 .skw-page__half--left .skw-page__content{background:#292929;}
.skw-page-2 .skw-page__half--right .skw-page__content{background-image:url("../img/2.jpg");}
.skw-page-3 .skw-page__half--left .skw-page__content{background-image:url("../img/3.jpg");}
.skw-page-3 .skw-page__half--right .skw-page__content{background:#292929;}
.skw-page-4 .skw-page__half--left .skw-page__content{background:#292929;}
.skw-page-4 .skw-page__half--right .skw-page__content{background-image:url("../img/4.jpg");}
.skw-page-5 .skw-page__half--left .skw-page__content{background-image:url("../img/5.jpg");}
.skw-page-5 .skw-page__half--right .skw-page__content{background:#292929;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
760.01 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
760.01 KB
立即下载
梅怡岚
了解
打赏作者 鼓励作者
Html Js 图片切换触摸3
最新结算
股权转让协议意向书模板
类型: .docx 金额: CNY 2.23￥ 状态: 待结算 详细>
股权转让协议意向书模板
类型: .docx 金额: CNY 0.28￥ 状态: 待结算 详细>
CSS3图片向上3D翻转渐隐消失特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3图片向上3D翻转渐隐消失特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
.net c# 将金额转人名币大写金额
类型: .rar 金额: CNY 2.39￥ 状态: 待结算 详细>
.net c# 将金额转人名币大写金额
类型: .rar 金额: CNY 0.3￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 2.23￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 0.28￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 2.23￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 0.28￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章