jquery页面-按屏滚动

 

写个页面边滚动按屏滚动效果，头一次写博客，欢迎拍砖！

页面基本效果：

头部空一部分，底部空一部分，保证页面主题内容可见

页面高度默认最低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

 

posted on 2012-10-20 11:07  靖儿  阅读(457)  评论(0)  编辑  收藏  举报

导航