写个页面边滚动按屏滚动效果，头一次写博客，欢迎拍砖！
页面基本效果：
头部空一部分，底部空一部分，保证页面主题内容可见
页面高度默认最低700，屏幕高度不低于700则把每个模块高度设置为屏幕高度。
不废话，上代码：
html:
<!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" /> <title>按屏滚动</title> <link type="text/css" rel="stylesheet" href="css/reset.css" /> <style type="text/css"> .con{ width:980px; margin:0 auto;} .con1{ height:700px; background:#090;} .con2{ height:700px; background:#099;} .con3{ height:700px; background:#963;} .con4{ height:700px; background:#C96;} .con5{ height:700px; background:#699;} .con6{ height:700px; background:#FC6;} </style> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/jquery.mousewheel.js"></script> </head> <body> <div class="con con1"></div> <div class="con con2"></div> <div class="con con3"></div> <div class="con con4"></div> <div class="con con5"></div> <div class="con con6"></div> <!-- 通调导航 --> <script type="text/javascript"> (function(){ var option = "{ name:'ldj'}"; var script = document.createElement('script'); script.setAttribute('type', 'text/javascript'); script.setAttribute('src', 'http://www.changyou.com/js/cyou_public.js'); script.setAttribute('id', 'cyou_public_js'); script.setAttribute('options', option); document.getElementsByTagName('head')[0].appendChild(script); })(); </script> <script type="text/javascript" src="js/fn.js"></script> </body> </html>
(function($) { $.scrollPage=function(options){ var defaults = { topH:44,//顶部留空 pageH:700,//页面模块最低高度 speed:1000,//"slow" animation:"linear",//动画效果 scroll_obj:null //$(".con");//所有滚动模块 }; var opts = $.extend(defaults, options); var scrollOver = 1; var scroll_obj = defaults.scroll_obj//所有滚动模块 var windowH; var conH = [0]; //n个区间 ,第一个为0； var topH = defaults.topH; var pageH = defaults.pageH; var speed = defaults.speed; var animation = defaults.animation; windowH = $(window).height(); $(window).resize(function(){ windowH = $(window).height(); init(); }) // 取消页面默认滚动 $("body").mousewheel(function(event){ event.stopPropagation(); event.preventDefault(); }); //初始化、重置页面模块高度 function init(){ for(var i = 0; i<scroll_obj.length; i++){ if(windowH < pageH){ scroll_obj.eq(i).height(pageH); }else{ if(i==0){ scroll_obj.eq(i).height(windowH - topH); }else{ scroll_obj.eq(i).height(windowH); } } if(i == 0){ conH[i + 1] = topH + scroll_obj.eq(i).height(); }else{ conH[i + 1] = conH[i] + scroll_obj.eq(i).height(); } } } //返回当前显示模块 function isArea (){ var wh = $(window).scrollTop(); for(var i = 0; i < conH.length - 1; i++){ if(wh >= conH[i] && wh < conH[i + 1]){ return i; } if(wh > conH[conH.length - 1]){ return i; } } } //跳转至某个 $.scrollPage.jumpTo = function (num){ $("body, html").animate({ scrollTop:conH[num] }, speed, animation, function(){ scrollOver = 1; }); } //上滚 function scrollUp(){ //console.log("上滚"); scrollOver = 0; var con_index = isArea (); if(con_index > 0){ $.scrollPage.jumpTo(con_index - 1); }else{ $.scrollPage.jumpTo(0); } } //下滚 function scrollDown(){ scrollOver = 0; //console.log("下滚"); var bottomH = $("body").height() - $(window).height(); var con_index = isArea (); if(scroll_obj.length - 1> con_index){ $.scrollPage.jumpTo(con_index + 1); }else{ $("body, html").animate({ scrollTop: bottomH + "px" }, speed, animation, function(){ scrollOver = 1; }); } } //绑定判断上滚、下滚 $("body").bind("mousewheel",function(event, delta, deltaX, deltaY) { if (delta > 0){ if(scrollOver){ scrollUp(); } } else if (delta < 0) if(scrollOver){ scrollDown(); } }); init(); //初始化、重置页面模块高度 } })(jQuery); // scroll_obj: $(".con") 必选； //参数可选 //topH:44,//顶部留空 //pageH:700,//页面模块最低高度 //speed:1000,//"slow" //animation:"linear" 默认jQuery提供”linear” 和 “swing”. /* //animation:"easeOutBounce",//动画效果以下效果需引用jquery.easing 插件 jswing,def,easeInQuad,easeOutQuad,easeInOutQuad,easeInCubic,easeOutCubic,easeInOutCubic,easeInQuart,easeOutQuart,easeInOutQuart,easeInQuint,easeOutQuint,easeInOutQuint,easeInSine,easeOutSine,easeInOutSine,easeInExpo,easeOutExpo,easeInOutExpo,easeInCirc,easeOutCirc,easeInOutCirc,easeInElastic,easeOutElastic,easeInOutElastic,easeInBack,easeOutBack,easeInOutBack,easeInBounce,easeOutBounce,easeInOutBounce */ //$.scrollPage.jumpTo(5); 跳转到第几个; $.scrollPage({ scroll_obj: $(".con"), animation:"easeOutBounce" });
其他资源：
svn获取：https://php-rss-ajax.googlecode.com/svn/trunk/svn/jquery-scroll-page
全部代码下载：http://php-rss-ajax.googlecode.com/files/jquery-scroll-page.rar
