ziqim/zhiqim_ui/src_extend/zhiqim_scroll_screen.js

/*
 * 版权所有 (C) 2015 知启蒙(ZHIQIM) 保留所有权利。
 * 
 * 指定登记&发行网站： https://www.zhiqim.com/ 欢迎加盟知启蒙，[编程有你，知启蒙一路随行]。
 *
 * 本文采用《知启蒙登记发行许可证》，除非符合许可证，否则不可使用该文件！
 * 1、您可以免费使用、修改、合并、出版发行和分发，再授权软件、软件副本及衍生软件；
 * 2、您用于商业用途时，必须在原作者指定的登记网站，按原作者要求进行登记；
 * 3、您在使用、修改、合并、出版发行和分发时，必须包含版权声明、许可声明，及保留原作者的著作权、商标和专利等知识产权；
 * 4、您在互联网、移动互联网等大众网络下发行和分发再授权软件、软件副本及衍生软件时，必须在原作者指定的发行网站进行发行和分发；
 * 5、您可以在以下链接获取一个完整的许可证副本。
 * 
 * 许可证链接：http://zhiqim.org/licenses/zhiqim_register_publish_license.htm
 *
 * 除非法律需要或书面同意，软件由原始码方式提供，无任何明示或暗示的保证和条件。详见完整许可证的权限和限制。
 */
 
+(function(Z)
{
//BEGIN
/************************************************************************************************/
//滚屏，每次滚轮滚动一个屏幕高度，并增加上下两个按钮点击切换屏幕，支持指定固定顶部高度和滚动速度
/************************************************************************************************/
//var sScreen = new Z.ScrollScreen();
//sScreen.fixHeight = 55;
//sScreen.execute();

Z.ScrollScreen = Z.Class.newInstance();
Z.ScrollScreen.prototype = 
{
    defaults:
    {
        speed: 13,
        times: 13,
        fixHeight:0,
        zIndex: 0
    },
    
    execute: function()
    {
        //支持滚屏的对象
        this.$screen = Z("[data-role=z-screen]");
    
        //监听初始化事件、窗口变化事件和滚轮事件
        if (!Z.B.firefox)
        {//非火狐刷新时执行window.scrollTo(0, 0)后会被浏览器跳转到原来位置，所以预先scrollTo(0, 0)
            Z(window).beforeunload(this.onLoad, this);
        }
        Z(window).load(this.onLoad, this).resize(this.onResize, this);
        Z(document).mousewheel(this.onMouseWheel, this);
                
        //向上按钮
        this.$up = Z('<div class="z-fixed z-w30 z-h30 z-bd-rd50p z-pointer"><i class="z-arrow z-up z-px5 z-absolute" style="margin:auto;top:0;left:0;bottom:0;right:0;"><span style="border-bottom-color:#d3d3d3"></span></i></div>');
        this.$up.appendTo("body").css({top: this.fixHeight+20, right: 20}).css({backgroundColor: "#d3d3d3", zIndex: this.zIndex})
            .click(this.onUp, this).mouseover(this.onUpMouseOver, this).mouseout(this.onUpMouseOut, this);
        
        //向下按钮
        this.$down = Z('<div class="z-fixed z-w30 z-h30 z-bd-rd50p z-pointer"><i class="z-arrow z-px5 z-absolute" style="margin:auto;top:0;left:0;bottom:0;right:0;"><span style="border-top-color:#d3d3d3"></span></i></div>');
        this.$down.appendTo("body").css({bottom: 20, right: 20}).css({backgroundColor: "#d3d3d3", zIndex: this.zIndex})
            .click(this.onDown, this).mouseover(this.onDownMouseOver, this).mouseout(this.onDownMouseOut, this);
            
        //初始化高度和设置滚屏高度
        this.onResize();
    },
    
    onLoad: function(e)
    {//刷新时回最上面
        window.scrollTo(0, 0);
    },
        
    onResize: function(e)
    {//重新设置高度和滚屏高度
        window.scrollTo(0, 0);
        this.running = false;
        this.height = Z.D.clientHeight() - this.fixHeight;
        this.$screen.css("height", this.height);
        this.maxHeight = Z.D.scrollHeight() - Z.D.clientHeight();
        this.$up.hide();
    },
    
    onUpMouseOver: function(e)
    {
        this.$up.css("backgroundColor", "#333")
            .find("i").css("borderBottomColor", "#fff")
            .find("span").css("borderBottomColor", "#333");
    },
    
    onUpMouseOut: function(e)
    {
        this.$up.css("backgroundColor", "#d3d3d3")
            .find("i").css("borderBottomColor", "#000")
            .find("span").css("borderBottomColor", "#d3d3d3");
    },
    
    onDownMouseOver: function(e)
    {
        this.$down.css("backgroundColor", "#333")
            .find("i").css("borderTopColor", "#fff")
            .find("span").css("borderTopColor", "#333");
    },
    
    onDownMouseOut: function(e)
    {
        this.$down.css("backgroundColor", "#d3d3d3")
            .find("i").css("borderTopColor", "#000")
            .find("span").css("borderTopColor", "#d3d3d3");
    },
    
    onUp: function()
    {//点击向上按钮
        if (this.running)
            return;
            
        this.running = true; 
        this.scrollTo(false);
    },
    
    onDown: function()
    {//点击向下按钮
        if (this.running)
            return;
            
        this.running = true; 
        this.scrollTo(true);
    },
    
    onMouseWheel: function(e)
    {//滚动滚轮
        Z.E.forbidden(e);
        if (this.running)
            return;
            
        this.running = true;
        this.scrollTo(Z.E.wheelDelta(e) < 0);
    },
    
    scrollTo: function(down)
    {//滚动操作
        var curHeight = Z.D.scrollTop();
        
        var index = 1;var endHeight, midHeight;
        if (down)
        {//向下
            if (this.maxHeight <= curHeight){
                this.running = false;
                return;
            }
            
            endHeight = curHeight + this.height;
            
            midHeight = Math.floor(this.height / this.times);
            Z.timer(this.speed, this.times, this, 
                function(){window.scrollTo(0, curHeight + midHeight * index++);},
                function(){window.scrollTo(0, endHeight);this.running=false;}
            );
                
            if (curHeight >= this.maxHeight - this.height)
                this.$down.fadeOut(this.speed * this.times);
                
            if (curHeight == 0)
                this.$up.fadeIn(this.speed * this.times);
        }
        else
        {//向上
            if (curHeight <= 0){
                this.running = false;
                return;
            }
        
            if (this.maxHeight == curHeight)
            {
                endHeight = Math.floor(curHeight / this.height) * this.height;
                this.$down.fadeIn(this.speed * this.times);
            }
            else
            {
                endHeight =  curHeight - this.height;
            }
                
            midHeight = (curHeight - endHeight) / this.times;
            Z.timer(this.speed, this.times, this, 
                function(){window.scrollTo(0, curHeight - midHeight * index++);},
                function(){window.scrollTo(0, endHeight);this.running=false;}
            );
                       
            if (endHeight <= 0)
                this.$up.fadeOut(this.speed * this.times);
        }
    }
};

Z.ScrollScreen.onload = function(f)
{//增加滚屏加载，当本JS加载完成之后才加载函数
    Z.onload(f);
};

//END
})(zhiqim);