简单实现js浮动框
本文实例为大家分享了js浮动框的实现代码，供大家参考，具体内容如下
一.在需要加入浮动框的页面中加入如下css代码：
<!--浮动窗口样式cssbegin-->
<styletype="text/css">
#msg_win{
border:1pxsolid#A67901;
background:#EAEAEA;
width:240px;
position:absolute;
right:0;
font-size:12px;
font-family:Arial;
margin:0px;
display:none;
overflow:hidden;
z-index:99;
}
#msg_win.icos{
position:absolute;
top:2px;
*top:0px;
right:2px;
z-index:9;
}
.icosa{
float:left;
color:#833B02;
margin:1px;
text-align:center;
font-weight:bold;
width:14px;
height:22px;
line-height:22px;
padding:1px;
text-decoration:none;
font-family:webdings;
}
.icosa:hover{
color:#fff;
}
#msg_title{
background:#BBDEF6;
border-bottom:1pxsolid#A67901;
border-top:1pxsolid#FFF;
border-left:1pxsolid#FFF;
color:#000;
height:25px;
line-height:25px;
text-indent:5px;
}
#msg_content{
margin:5px;
margin-right:0;
width:230px;
height:126px;
overflow:hidden;
}
</style>
<!--浮动窗口样式cssend-->
二.js代码(注意：该代码要添加整个页面最后，目的是页面加载完成时加载它)
<!--浮动窗口js，必须要放置到最后begin-->
<scripttype="text/javascript">
varMessage={
set:function(){//最小化与恢复状态切换
varset=this.minbtn.status==1?[0,1,'block',this.char[0],'最小化']:[1,0,'none',this.char[1],'展开'];
this.minbtn.status=set[0];
this.win.style.borderBottomWidth=set[1];
this.content.style.display=set[2];
this.minbtn.innerHTML=set[3]
this.minbtn.title=set[4];
this.win.style.top=this.getY().top;
},
close:function(){//关闭
this.win.style.display='none';
window.onscroll=null;
},
setOpacity:function(x){//设置透明度
varv=x>=100?'':'Alpha(opacity='+x+')';
this.win.style.visibility=x<=0?'hidden':'visible';//IE有绝对或相对定位内容不随父透明度变化的bug
this.win.style.filter=v;
this.win.style.opacity=x/100;
},
show:function(){//渐显
clearInterval(this.timer2);
varme=this,fx=this.fx(0,100,0.1),t=0;
this.timer2=setInterval(function(){
t=fx();
me.setOpacity(t[0]);
if(t[1]==0){clearInterval(me.timer2)}
},10);
},
fx:function(a,b,c){//缓冲计算
varcMath=Math[(a-b)>0?"floor":"ceil"],c=c||0.1;
returnfunction(){return[a+=cMath((b-a)*c),a-b]}
},
getY:function(){//计算移动坐标
vard=document,b=document.body,e=document.documentElement;
vars=Math.max(b.scrollTop,e.scrollTop);
varh=/BackCompat/i.test(document.compatMode)?b.clientHeight:e.clientHeight;
varh2=this.win.offsetHeight;
return{foot:s+h+h2+2+'px',top:s+h-h2-2+'px'}
},
moveTo:function(y){//移动动画
clearInterval(this.timer);
varme=this,a=parseInt(this.win.style.top)||0;
varfx=this.fx(a,parseInt(y));
vart=0;
this.timer=setInterval(function(){
t=fx();
me.win.style.top=t[0]+'px';
if(t[1]==0){
clearInterval(me.timer);
me.bind();
}
},10);
},
bind:function(){//绑定窗口滚动条与大小变化事件
varme=this,st,rt;
window.onscroll=function(){
clearTimeout(st);
clearTimeout(me.timer2);
me.setOpacity(0);
st=setTimeout(function(){
me.win.style.top=me.getY().top;
me.show();
},600);
};
window.onresize=function(){
clearTimeout(rt);
rt=setTimeout(function(){me.win.style.top=me.getY().top},100);
}
},
init:function(){//创建HTML
function$(id){returndocument.getElementById(id)};
this.win=$('msg_win');
varset={minbtn:'msg_min',closebtn:'msg_close',title:'msg_title',content:'msg_content'};
for(varIdinset){this[Id]=$(set[Id])};
varme=this;
this.minbtn.onclick=function(){me.set();this.blur()};
this.closebtn.onclick=function(){me.close()};
this.char=navigator.userAgent.toLowerCase().indexOf('firefox')+1?['_','::','×']:['0','2','r'];//FF不支持webdings字体
this.minbtn.innerHTML=this.char[0];
this.closebtn.innerHTML=this.char[2];
setTimeout(function(){//初始化最先位置
me.win.style.display='block';
me.win.style.top=me.getY().foot;
me.moveTo(me.getY().top);
},0);
returnthis;
}
};
Message.init();
</script>
<!--浮动窗口jsend-->
三.html代码(注意：该代码要放置到body的最后)
<!--浮动窗口html代码begin-->
<hr>
<divid="msg_win"style="display:block;top:490px;visibility:visible;opacity:1;">
<divclass="icos">
<aid="msg_min"title="最小化"href="javascript:void0">_</a><aid="msg_close"title="关闭"href="javascript:void0">×</a>
</div>
<divid="msg_title">设备运行情况--></div>
<divid="msg_content"style="overflow:auto;height:150px;width:100%;white-space:nowrap">
${commonMsg.devRun}
</div>
</div>
<!--浮动窗口html代码end-->
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。