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> <base target="_blank" /> <link rel="stylesheet" type="text/css" href="css/css.css"> </head> <body> <div id="container"> <div class="section active" id="section0"> <div class="intro"> <h1 class="title">Section One</h1> </div> </div> <div class="section" id="section1"> <div class="intro"> <h1 class="title">Section Two</h1> </div> </div> <div class="section" id="section2"> <div class="intro"> <h1 class="title">Section Three</h1> </div> </div> <div class="section" id="section3"> <div class="intro"> <h1 class="title">Section Three</h1> </div> </div> <div class="section" id="section4"> <div class="intro"> <h1 class="title">Section Three</h1> </div> </div> <div class="section" id="section5"> <div class="intro"> <h1 class="title">Section Three</h1> </div> </div> <div class="section" id="section6"> <div class="intro"> <h1 class="title">Section Three</h1> </div> </div> <div class="section" id="section7"> <div class="intro"> <h1 class="title">Section Three</h1> </div> </div> <div class="section" id="section8"> <div class="intro"> <h1 class="title">Section Three</h1> </div> </div> <div class="section" id="section9"> <div class="intro"> <h1 class="title">Section Three</h1> </div> </div> </div> <script src="http://down.hovertree.com/jquery/jquery-2.2.3.min.js" type="text/javascript"></script> <script type="text/javascript" src="js/switchPage.js"></script> <script type="text/javascript"> $(function(){ $("#container").switchPage({ 'loop' : true, 'keyboard' : true, 'direction' : 'vertical' }); }); </script> </body> </html>
css
h1, body, html { padding: 0; margin: 0; } html, body { height: 100%; overflow: hidden; } h1 { font-size: 2em; font-weight: normal; } #container, .section { height: 100%; position: relative; } #section0, #section1, #section2, #section3 { background-color: #000; background-size: cover; background-position: 50% 50%; } #section0 { background-color: #024BCE; color: #fff; text-shadow: 1px 1px 1px #333; } #section1 { color: #fff; text-shadow: 1px 1px 1px #333; background-color: #31B81D; } #section2 { background-color: #01B5F0; color: #fff; text-shadow: 1px 1px 1px #666; } #section3 { color: #008283; background-color: #5D0FF1; text-shadow: 1px 1px 1px #fff; } #section4 { color: #fff; text-shadow: 1px 1px 1px #333; background-color: #31B81D; } #section5 { background-color: #01B5F0; color: #fff; text-shadow: 1px 1px 1px #666; } #section6 { color: #008283; background-color: #5D0FF1; text-shadow: 1px 1px 1px #fff; } #section7 { color: #fff; text-shadow: 1px 1px 1px #333; background-color: #31B81D; } #section8 { background-color: #01B5F0; color: #fff; text-shadow: 1px 1px 1px #666; } #section9 { color: #008283; background-color: #5D0FF1; text-shadow: 1px 1px 1px #fff; } .intro { position: absolute; top: 50%; width: 100%; -webkit-transform: translateY(-50%); transform: translateY(-50%); text-align: center; } /*右侧导航*/ #pages { position: fixed; right: 10px; top: 50%; list-style: none; } #pages li { width: 8px; height: 8px; border-radius: 50%; background: #fff; margin: 0 0 10px 5px; } #pages li.active { width: 14px; height: 14px; border: 2px solid #FFFE00; background: none; margin-left: 0; } #section0 .title { -webkit-transform: translateX(-100%);/*内容旋转*/ transform: translateX(-100%); -webkit-animation: sectitle0 1s ease-in-out 100ms forwards; animation: sectitle0 1s ease-in-out 100ms forwards; /*滑入页面*/ } /*为支持上述滑入特效写的*/ @-webkit-keyframes sectitle0 { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes sectitle0 { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } }
js
(function($) { var defaults = { 'container': '#container', //容器 'sections': '.section', //子容器 'easing': 'ease', //特效方式，ease-in,ease-out,linear 'duration': 1000, //每次动画执行的时间 'pagination': true, //是否显示分页 'loop': false, //是否循环 'keyboard': true, //是否支持键盘 'direction': 'vertical', //滑动的方向 horizontal,vertical, 'onpageSwitch': function(pagenum) {} }; var win = $(window); var iIndex = 0; //当前section的索引 var arrElement = []; var canScroll = true; var container; var sections; var opts; var flag=false; var SP = $.fn.switchPage = function(options) { opts = $.extend({}, defaults, options || {}); container = $(opts.container); sections = container.find(opts.sections); sections.each(function() { arrElement.push($(this)); }); return this.each(function() { if (opts.direction == 'horizontal') initLayout(); if (opts.pagination) initPagination(); }) } //重置鼠标滚轮事件 $(document).on("mousewheel DOMMouseScroll", MouseWheelHandler); function MouseWheelHandler(e) { e.preventDefault(); var value = e.originalEvent.wheelDelta || -e.originalEvent.detail; var delta = Math.max(-1, Math.min(1, value)); if (canScroll) { if (delta < 0) { SP.moveSectionDown(); } else { SP.moveSectionUp(); } } return false; } //向上一张移 SP.moveSectionUp = function() { if (iIndex) { iIndex--; } else if (opts.loop) { iIndex = arrElement.length - 1; } scrollPage(arrElement[iIndex]); } //向下一张移 SP.moveSectionDown = function() { if (iIndex < (arrElement.length - 1)) { iIndex++ } else if (opts.loop) { iIndex = 0; } scrollPage(arrElement[iIndex]); } //当设置横向移动时初始化横向页面 function initLayout() { var width = (sections.length * 100) + '%', cellwidth = (100 / sections.length).toFixed(2) + '%'; // container.width(width).addClass('left'); container.width(width); sections.width(cellwidth).addClass('left'); } //导航条初始化 hovertree.com function initPagination() { var length = sections.length; var pageHtml = '<ul id="pages"><li class="active" id="dot_0"></li>' for (var i = 1; i < length; i++) pageHtml += '<li id="dot_'+i+'"></li>'; pageHtml += '</ul>'; $("body").append(pageHtml); flag=true; if(flag==true){ $("li").click(function(){ var liId = $(this).attr("id"); var arr = liId.split('_'); iIndex=arr[1]; scrollPage(arrElement[iIndex]); }); } } /*跳转到dot对应页面*/ function clickDot(){ } //移动页面 function scrollPage(element) { var dest = element.position(); if (dest == void 0) return; initEffects(dest, element); } function isSupportCss(property) { var body = $('body')[0]; for (var i = 0; i < property.length; i++) { if (property[i] in body.style) { return true; } } return false; } //移动页面的核心函数 function initEffects(dest, element) { canScroll = false; var translate = ""; if (opts.direction == 'horizontal') { translate = '-' + dest.left + 'px, 0px, 0px'; } else { translate = '0px, -' + dest.top + 'px, 0px'; } container.css({ 'transform': "translate3d(" + translate + ")", 'transition': "all " + opts.duration + "ms " + opts.easing }); container.on("webkitTransitionEnd msTransitionend mozTransitionend transitionend", function() { canScroll = true; }); element.addClass("active").siblings().removeClass('active'); if (opts.pagination) { paginationHandler(); } } //每次页面移动时，修改导航栏 何问起 function paginationHandler() { var pages = $('#pages li'); pages.eq(iIndex).addClass('active').siblings().removeClass('active'); } var resizeId; win.resize(function() { clearTimeout(resizeId); resizeId = setTimeout(function(){ rebuild(); }, 500); }); function rebuild() { var currentHeight = win.height(); var currentWidth = win.width(); var element = arrElement[iIndex]; if(opts.direction == "horizontal") { var offsetLeft = element.offset().left; if (Math.abs(offsetLeft) > (currentWidth/2) && iIndex < (arrElement.length - 1)){ iIndex++ } }else { var offsetTop = element.offset().top; if (Math.abs(offsetTop) > (currentHeight/2) && iIndex < (arrElement.length - 1)){ iIndex++ } } var currentElement = arrElement[iIndex], dest = currentElement.position(); initEffects(dest, currentElement); if(opts.pagination) paginationHandler(); } })(jQuery);