css部分：

<style>body, html { font-size: 100%; padding: 0; margin: 0;}/* Reset */*,*:after,*:before {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */.clearfix:before,.clearfix:after {content: " ";display: table;}.clearfix:after {clear: both;}body{/*background: #f9f7f6;color: #404d5b;*/background: #494A5F;color: #D5D6E2;font-weight: 500;font-size: 1.05em;font-family: "Microsoft YaHei","宋體","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;}a{color: #2fa0ec;text-decoration: none;outline: none;}a:hover,a:focus{color:#74777b;}*, *: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/kaka1.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/kaka2.jpg");}.skw-page-3 .skw-page__half--left .skw-page__content {background-image: url("../../../../img/kaka3.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/kaka4.jpg");}.skw-page-5 .skw-page__half--left .skw-page__content {background-image: url("../../../../img/kaka5.jpg");}.skw-page-5 .skw-page__half--right .skw-page__content {background: #292929;}</style>

html部分：

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

?

js部分：（此處需要引入jquery.js）

<<script type="text/javascript">$(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>

?

轉載于:https://www.cnblogs.com/shanhaihong/p/5691250.html

總結

以上是生活随笔為你收集整理的鼠标滚动倾斜分割切换的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。