简单实现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-->
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。