Heim > Web-Frontend > js-Tutorial > Hauptteil

封装的原生javascript弹出层代码_布局与层

WBOY
Freigeben: 2016-05-16 18:19:11
Original
1313 Leute haben es durchsucht
复制代码 代码如下:

';
Hongru.box.open(elements,options);

function delay(){//回调
if(($('sure-btn') && $('cancel-btn')) != null){
clearInterval(checkComplete);
//alert('yes');
$('sure-btn').onclick = function(){
if(isFunction(sureCall)){sureCall.call(this);}
}
$('cancel-btn').onclick = function(){
if(isFunction(cancelCall)){cancelCall.call(this);}
Hongru.box.hide();
}
}}
var checkComplete = setInterval(delay,100);
}
}
}();
Hongru.page=function(){
return{
top:function(){return document.documentElement.scrollTop||document.body.scrollTop},
width:function(){return self.innerWidth||document.documentElement.clientWidth||document.body.clientWidth},
height:function(){return self.innerHeight||document.documentElement.clientHeight||document.body.clientHeight},
total:function(d){
var b=document.body, e=document.documentElement;
return d?Math.max(Math.max(b.scrollHeight,e.scrollHeight),Math.max(b.clientHeight,e.clientHeight)):
Math.max(Math.max(b.scrollWidth,e.scrollWidth),Math.max(b.clientWidth,e.clientWidth))
}
}
}();
// ]]>

不设任何options参数的box(默认高200px,宽300px)
普通设定高宽的box
高宽自适应内容高宽的box
不带预载动画的box
延迟自动消失的box
title自定义的box
不带标题栏的的box
不带标题栏关闭按钮的box
带按钮和回调参数的box

调用 Hongru.box.open(con,options)函数,参数con为弹出层主要内容,可以是html代码。options为一个object,可选参数目前有
复制代码 代码如下:

{
width:300 //自定义,弹出层主体(除边框和标题栏的宽度),为0时自适应。
height:200//自定义,弹出层主体(除边框和标题栏的高度),为0时自适应。
isPre:1 //true or false,是否有预加载背景图,
time:0 //延迟自动关闭时间,秒为单位,0时不触发
title:'' //自定义title
isBar:1 //true or false,是否有标题栏
isShut:1 //是否有关闭按钮
}

另 Hongru.box.ask(con,options,surecall,cancelcall)为带按钮的提示框,带回调函数前两个参数同上,后两个参数分别为‘确认'和‘取消'的回调函数
其中加入了透明度渐变和大小渐变,透明度渐变主体函数如下:
复制代码 代码如下:

show sourceview sourceprint?alphaAnim:function(obj,destination,direction){
var opacity = Math.round(obj.style.opacity*100);
if(opacity == destination){
clearInterval(obj.animing);
if(direction == -1){
obj.style.display='none';
obj == box?Hongru.box.alpha(mask,-1,0):content.innerHTML=box.style.backgroundImage='';
}else{
curOptions = {width:_width,height:_height,isPre:isPreload}
obj == mask?this.alpha(box,1,100):Hongru.box.fill(_content,curOptions);
}
}else{
var n=Math.ceil((opacity+((destination-opacity)*.5))); n=n==1?0:n;
obj.style.opacity=n/100;
obj.style.filter='alpha(opacity='+n+')';
}
},

box大小渐变函数体如下:
复制代码 代码如下:

show sourceview sourceprint?sizeAnim:function(obj,width,otherW,wFlag,height,otherH,hFlag){
var objW = obj.offsetWidth-otherW, objH = obj.offsetHeight-otherH;
if(objW == width && objH == height){
clearInterval(obj.sizing);
box.style.backgroundImage='none';
content.style.display='block';
}else{
if(objW!=width){
var n = objW+((width-objW)*.5);
obj.style.width = wFlag?Math.ceil(n)+'px':Math.floor(n)+'px';
}
if(objH!=height){
var n = objH+((height-objH)*.5);
obj.style.height = hFlag?Math.ceil(n)+'px':Math.floor(n)+'px';
}
this.pos();
}
},

好了,废话不多说了,附上源文件打包下载:狠狠点击这里
如果觉得不错,请移驾点下 下面 的推荐
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage