198 rivejä
7.2 KiB
JavaScript
198 rivejä
7.2 KiB
JavaScript
/*
|
|
* 版权所有 (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); |