css3+js实现整屏滑动
整屏滚动
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>整屏滚动</title> <meta content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0" name="viewport"> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/index.css"> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript" src="js/jq_mousewheel.min.js"></script> <script> //以下为鼠标滑轮插件 (function (factory) { if ( typeof define === 'function' && define.amd ) { // AMD. Register as an anonymous module. define(['jquery'], factory); } else if (typeof exports === 'object') { // Node/CommonJS style for Browserify module.exports = factory; } else { // Browser globals factory(jQuery); } }(function ($) { var toFix = ['wheel', 'mousewheel', 'DOMMouseScroll', 'MozMousePixelScroll'], toBind = ( 'onwheel' in document || document.documentMode >= 9 ) ? ['wheel'] : ['mousewheel', 'DomMouseScroll', 'MozMousePixelScroll'], slice = Array.prototype.slice, nullLowestDeltaTimeout, lowestDelta; if ( $.event.fixHooks ) { for ( var i = toFix.length; i; ) { $.event.fixHooks[ toFix[--i] ] = $.event.mouseHooks; } } var special = $.event.special.mousewheel = { version: '3.1.12', setup: function() { if ( this.addEventListener ) { for ( var i = toBind.length; i; ) { this.addEventListener( toBind[--i], handler, false ); } } else { this.onmousewheel = handler; } // Store the line height and page height for this particular element $.data(this, 'mousewheel-line-height', special.getLineHeight(this)); $.data(this, 'mousewheel-page-height', special.getPageHeight(this)); }, teardown: function() { if ( this.removeEventListener ) { for ( var i = toBind.length; i; ) { this.removeEventListener( toBind[--i], handler, false ); } } else { this.onmousewheel = null; } // Clean up the data we added to the element $.removeData(this, 'mousewheel-line-height'); $.removeData(this, 'mousewheel-page-height'); }, getLineHeight: function(elem) { var $elem = $(elem), $parent = $elem['offsetParent' in $.fn ? 'offsetParent' : 'parent'](); if (!$parent.length) { $parent = $('body'); } return parseInt($parent.css('fontSize'), 10) || parseInt($elem.css('fontSize'), 10) || 16; }, getPageHeight: function(elem) { return $(elem).height(); }, settings: { adjustOldDeltas: true, // see shouldAdjustOldDeltas() below normalizeOffset: true // calls getBoundingClientRect for each event } }; $.fn.extend({ mousewheel: function(fn) { return fn ? this.bind('mousewheel', fn) : this.trigger('mousewheel'); }, unmousewheel: function(fn) { return this.unbind('mousewheel', fn); } }); function handler(event) { var orgEvent = event || window.event, args = slice.call(arguments, 1), delta = 0, deltaX = 0, deltaY = 0, absDelta = 0, offsetX = 0, offsetY = 0; event = $.event.fix(orgEvent); event.type = 'mousewheel'; // Old school scrollwheel delta if ( 'detail' in orgEvent ) { deltaY = orgEvent.detail * -1; } if ( 'wheelDelta' in orgEvent ) { deltaY = orgEvent.wheelDelta; } if ( 'wheelDeltaY' in orgEvent ) { deltaY = orgEvent.wheelDeltaY; } if ( 'wheelDeltaX' in orgEvent ) { deltaX = orgEvent.wheelDeltaX * -1; } // Firefox < 17 horizontal scrolling related to DOMMouseScroll event if ( 'axis' in orgEvent && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) { deltaX = deltaY * -1; deltaY = 0; } // Set delta to be deltaY or deltaX if deltaY is 0 for backwards compatabilitiy delta = deltaY === 0 ? deltaX : deltaY; // New school wheel delta (wheel event) if ( 'deltaY' in orgEvent ) { deltaY = orgEvent.deltaY * -1; delta = deltaY; } if ( 'deltaX' in orgEvent ) { deltaX = orgEvent.deltaX; if ( deltaY === 0 ) { delta = deltaX * -1; } } // No change actually happened, no reason to go any further if ( deltaY === 0 && deltaX === 0 ) { return; } // Need to convert lines and pages to pixels if we aren't already in pixels // There are three delta modes: // * deltaMode 0 is by pixels, nothing to do // * deltaMode 1 is by lines // * deltaMode 2 is by pages if ( orgEvent.deltaMode === 1 ) { var lineHeight = $.data(this, 'mousewheel-line-height'); delta *= lineHeight; deltaY *= lineHeight; deltaX *= lineHeight; } else if ( orgEvent.deltaMode === 2 ) { var pageHeight = $.data(this, 'mousewheel-page-height'); delta *= pageHeight; deltaY *= pageHeight; deltaX *= pageHeight; } // Store lowest absolute delta to normalize the delta values absDelta = Math.max( Math.abs(deltaY), Math.abs(deltaX) ); if ( !lowestDelta || absDelta < lowestDelta ) { lowestDelta = absDelta; // Adjust older deltas if necessary if ( shouldAdjustOldDeltas(orgEvent, absDelta) ) { lowestDelta /= 40; } } // Adjust older deltas if necessary if ( shouldAdjustOldDeltas(orgEvent, absDelta) ) { // Divide all the things by 40! delta /= 40; deltaX /= 40; deltaY /= 40; } // Get a whole, normalized value for the deltas delta = Math[ delta >= 1 ? 'floor' : 'ceil' ](delta / lowestDelta); deltaX = Math[ deltaX >= 1 ? 'floor' : 'ceil' ](deltaX / lowestDelta); deltaY = Math[ deltaY >= 1 ? 'floor' : 'ceil' ](deltaY / lowestDelta); // Normalise offsetX and offsetY properties if ( special.settings.normalizeOffset && this.getBoundingClientRect ) { var boundingRect = this.getBoundingClientRect(); offsetX = event.clientX - boundingRect.left; offsetY = event.clientY - boundingRect.top; } // Add information to the event object event.deltaX = deltaX; event.deltaY = deltaY; event.deltaFactor = lowestDelta; event.offsetX = offsetX; event.offsetY = offsetY; // Go ahead and set deltaMode to 0 since we converted to pixels // Although this is a little odd since we overwrite the deltaX/Y // properties with normalized deltas. event.deltaMode = 0; // Add event and delta to the front of the arguments args.unshift(event, delta, deltaX, deltaY); // Clearout lowestDelta after sometime to better // handle multiple device types that give different // a different lowestDelta // Ex: trackpad = 3 and mouse wheel = 120 if (nullLowestDeltaTimeout) { clearTimeout(nullLowestDeltaTimeout); } nullLowestDeltaTimeout = setTimeout(nullLowestDelta, 200); return ($.event.dispatch || $.event.handle).apply(this, args); } function nullLowestDelta() { lowestDelta = null; } function shouldAdjustOldDeltas(orgEvent, absDelta) { // If this is an older event and the delta is divisable by 120, // then we are assuming that the browser is treating this as an // older mouse wheel event and that we should divide the deltas // by 40 to try and get a more usable deltaFactor. // Side note, this actually impacts the reported scroll distance // in older browsers and can cause scrolling to be slower than native. // Turn this off by setting $.event.special.mousewheel.settings.adjustOldDeltas to false. return special.settings.adjustOldDeltas && orgEvent.type === 'mousewheel' && absDelta % 120 === 0; } })); //以上为鼠标滑轮插件 $(document).ready(function() { var floor_top = 0; //申明楼层TOP值 var floor_bool = 0; //滚动布尔值 var floor_h = 0; //申明楼层高度值 var floor_index = 0; //申明楼层索引值 var all_floor = $(".floor").length; //获取楼层数 var floor_li_h = $("#floor_li_wrap").height(); //获取右边小按钮高度 function set_main() { var window_h = $(window).height(); //获取窗口高度 var window_w = $(window).width(); //获取窗口宽度 $("#main,.floor").css({ //设置显示区域和楼层的高宽（是一样的） "width": window_w + "px", "height": window_h + "px" }); $("#floor_box").css("top", -(window_h * floor_index) + "px"); //根据当前的窗口高度和楼层索引，算出楼层的TOP值 $("#floor_li_wrap").css({//根据当前的窗口高度,计算右边小按钮的TOP值,窗口变化时移动小按钮到正确的位置 "top": (window_h / 2) - (floor_li_h / 2) + "px", "right": "20px" }); } set_main(); //页面准备好了就运行一次，设置初始值 $(window).resize(function() { //监听窗口大小变化 set_main(); }) function change_list(){ $("#floor_li_wrap li").eq(floor_index).find("a").addClass("this_floor_li_a"); //添加当前按钮样式 $("#floor_li_wrap li").eq(floor_index).siblings().find("a").removeClass("this_floor_li_a"); //移除其它当前按钮样式 } function change_page(i, ii) { //页面滚动效果 floor_h = $("#main").height(); //获取显示区域高度 var all_floor_h = -(floor_h * (all_floor - 1)); //申明楼层总高度 var floor_box = $("#floor_box"); if (eval(i)) { floor_bool = 1; eval(ii); if (floor_index < 0) { floor_index = 0; } else if (floor_index >= (all_floor - 1)) { floor_index = all_floor - 1; } floor_top = -(floor_index * floor_h) floor_box.animate({ top: floor_top + "px" }, 1000, "swing", function() { floor_bool = 0; }) change_list(); } } $(document).bind("mousewheel", function mouseW(event, delta) { //绑定滑轮事件，并向 页面切换 传递参数 if (delta == (-1) && floor_bool == 0) { var i = "floor_index < all_floor"; var ii = "floor_index += 1"; change_page(i, ii) } else if (delta == (1) && floor_bool == 0) { var i = "floor_index > 0"; var ii = "floor_index -= 1"; change_page(i, ii) } }); $("#floor_li_wrap li").on("click", function() { floor_index = $(this).index();//获取当前li的索引号 fllor_top = -(floor_index * floor_h); floor_h = $("#main").height(); //获取显示区域高度 $("#floor_box").animate({ top: fllor_top + "px" }, 1000); change_list(); }) }) </script> <style> * { margin: 0px; padding: 0px; list-style-type: none; } #main { width: 100%; height: 100%; position: relative; overflow: hidden; } #floor_box { width: 100%; height: 100%; position: absolute; top: 0; } .floor { width: 100%; height: 100%; position: relative; } #floor_1 { background: url('http://www.iunios.com/static/index/img/index/s1_bg2.jpg') no-repeat 0/cover; } #floor_2 { background: #548C00; } #floor_3 { background: #0F7577; } #floor_4 { background: #FF8000; } #floor_li_wrap { width: 10px; height: auto; position: fixed; right: 20px; top: 200px } #floor_li_wrap li { display: block; width: 10px; height: 10px; margin-bottom: 25px; cursor: pointer; } .floor_li_a { display: block; width: 6px; height: 6px; margin: 2px; border-radius: 50%; background: #E0E0E0; } .this_floor_li_a { width: 10px; height: 10px; margin: 0; background: #0072E3; } </style> </head> <body> <div id="main"> <div id="floor_box"> <div id="floor_1" class="floor"></div> <div id="floor_2" class="floor"></div> <div id="floor_3" class="floor"></div> <div id="floor_4" class="floor"></div> </div> <div id="floor_li_wrap"> <ul> <li> <a class="floor_li_a this_floor_li_a"></a> </li> <li> <a class="floor_li_a"></a> </li> <li> <a class="floor_li_a"></a> </li> <li> <a class="floor_li_a"></a> </li> </ul> </div> </div> </body> </html>
