first commit
This commit is contained in:
@@ -0,0 +1,198 @@
|
||||
/*
|
||||
* 版权所有 (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);
|
||||
Reference in New Issue
Block a user