最近写了个JS通用浮动类的脚本
View Code
1 function lsFloat(id,location,intervalshow){
2 this.ID=id;
3 this.InnerHTML="";
4 this.Location=location;
5 this.IntervalShow=intervalshow;
6 this.CloseButton=true;
7 this.Width=0;
8 this.Height=0;
9 this.IE6CalibrationlsTop=6;//校准IE6偏差
10 }
11 ///关闭浮动
12 function lsFloatClose(ID,Time){
13 document.getElementById(ID).style.display="none";
14 setTimeout(function(){
15 document.getElementById(ID).style.display="block";
16 },Time);
17 }
18 ///校准位置
19 function CalibrationlsFloatOffset(ID,Location){
20 var Obj=document.getElementById(ID);
21 switch(Location.toLowerCase()){
22 case "left"://左居中
23 Obj.style.top=GetFloatOffsetTop(Obj.clientHeight);
24 break;
25 case "right"://右居中
26 Obj.style.top=GetFloatOffsetTop(Obj.clientHeight);
27 break;
28 case "centent"://居中
29 Obj.style.left=GetFloatOffsetLeft(parseInt(Obj.style.width));
30 Obj.style.top=GetFloatOffsetTop(parseInt(Obj.style.height));
31 break;
32 }
33 }
34 ///校准位置
35 function _CalibrationlsFloatOffset(ID,Location,IE6CalibrationlsTop){
36 var Obj=document.getElementById(ID);
37 switch(Location.toLowerCase()){
38 case "left"://左居中
39 Obj.style.setExpression("top","eval(document.documentElement.scrollTop+"+GetFloatOffsetTop(parseInt(Obj.style.height))+")");
40 break;
41 case "right"://右居中
42 Obj.style.setExpression("top","eval(document.documentElement.scrollTop+"+GetFloatOffsetTop(parseInt(Obj.style.height))+")");
43 break;
44 case "lefttop"://左上
45 Obj.style.setExpression("top","eval(document.documentElement.scrollTop)");
46 break;
47 case "righttop"://右上
48 Obj.style.setExpression("top","eval(document.documentElement.scrollTop)");
49 break;
50 case "leftbottom"://左下
51 Obj.style.setExpression("top","eval(document.documentElement.scrollTop+"+document.documentElement.clientHeight+"-"+(parseInt(Obj.style.height)+IE6CalibrationlsTop)+")");
52 break;
53 case "rightbottom"://右下
54 Obj.style.setExpression("top","eval(document.documentElement.scrollTop+"+document.documentElement.clientHeight+"-"+(parseInt(Obj.style.height)+IE6CalibrationlsTop)+")");
55 break;
56 case "centent"://居中
57 Obj.style.setExpression("top","eval(document.documentElement.scrollTop+"+GetFloatOffsetTop(parseInt(Obj.style.height))+")");
58 Obj.style.setExpression("left","eval(document.documentElement.scrollLeft+"+GetFloatOffsetLeft(parseInt(Obj.style.width))+")");
59 break;
60 }
61 }
62 ///返回绝对位置
63 //return OffseTop
64 function GetFloatOffsetTop(Height){
65 var clentHeight=document.documentElement.clientHeight;
66 var offsettop=0;
67 offsettop=clentHeight/2-Height/2;
68 return parseInt(offsettop);
69 }
70
71 //return OffseLeft
72 function GetFloatOffsetLeft(Width){
73 var clentWidth=document.documentElement.clientWidth;
74 var offsetleft=0;
75 offsetleft=clentWidth/2-Width/2;
76 return parseInt(offsetleft);
77 }
78 ///返回浏览器版本
79 lsFloat.prototype.GetBrowserVersion=function(){
80 try{
81 var browser=navigator.appName;
82 var b_version=navigator.appVersion;
83 var version=b_version.split(";");
84 var trim_Version=version[1].replace(/[ ]/g,"");
85 if(browser=="Microsoft Internet Explorer"){
86 if(trim_Version=="MSIE6.0"){
87 return "IE6";
88 }else{
89 return "IE6+";
90 }
91 }else{
92 return "NotIE";
93 }
94 }catch(e){
95 return "NotIE";
96 }
97 }
98 //返回样式
99 lsFloat.prototype.GetStyle=function(){
100 var TempHTML="";
101
102 if(this.GetBrowserVersion()=="IE6"){
103 TempHTML="<div id=\""+this.ID+"\" style=\"_position:absolute; @Location;width:auto;height:auto;margin:2px;padding:0px;width:"+this.Width+"px;height:"+this.Height+"px;\">";
104
105 switch(this.Location.toLowerCase()){
106 case "lefttop"://左上
107 TempHTML=TempHTML.replace("@Location","left:0px;_top:expression(eval(document.documentElement.scrollTop));");
108 setInterval("_CalibrationlsFloatOffset('"+this.ID+"','"+this.Location+"',"+this.IE6CalibrationlsTop+");",1000);
109 break;
110 case "righttop"://右上
111 TempHTML=TempHTML.replace("@Location","right:0px;_top:expression(eval(document.documentElement.scrollTop));");
112 setInterval("_CalibrationlsFloatOffset('"+this.ID+"','"+this.Location+"',"+this.IE6CalibrationlsTop+");",1000);
113 break;
114 case "leftbottom"://左下
115 TempHTML=TempHTML.replace("@Location","left:0px;_top:expression(eval(document.documentElement.scrollTop+"+document.documentElement.clientHeight+"-"+(this.Height+this.IE6CalibrationlsTop)+"));");
116 setInterval("_CalibrationlsFloatOffset('"+this.ID+"','"+this.Location+"',"+this.IE6CalibrationlsTop+");",1000);
117 break;
118 case "rightbottom"://右下
119 TempHTML=TempHTML.replace("@Location","right:0px;_top:expression(eval(document.documentElement.scrollTop+"+document.documentElement.clientHeight+"-"+(this.Height+this.IE6CalibrationlsTop)+"));");
120 setInterval("_CalibrationlsFloatOffset('"+this.ID+"','"+this.Location+"',"+this.IE6CalibrationlsTop+");",1000);
121 break;
122 case "left"://左居中
123 TempHTML=TempHTML.replace("@Location","left:0px;_top:expression(eval(document.documentElement.scrollTop+"+GetFloatOffsetTop(this.Height)+"));");
124 setInterval("_CalibrationlsFloatOffset('"+this.ID+"','"+this.Location+"');",1000);
125 break;
126 case "right"://右居中
127 TempHTML=TempHTML.replace("@Location","right:0px;_top:expression(eval(document.documentElement.scrollTop+"+GetFloatOffsetTop(this.Height)+"));");
128 setInterval("_CalibrationlsFloatOffset('"+this.ID+"','"+this.Location+"');",1000);
129 break;
130 case "centent"://屏幕居中
131 TempHTML=TempHTML.replace("@Location","_top:expression(eval(document.documentElement.scrollTop+"+GetFloatOffsetTop(this.Height)+"));_left:expression(eval(document.documentElement.scrollLeft+"+GetFloatOffsetLeft(this.Width)+"));");
132 setInterval("_CalibrationlsFloatOffset('"+this.ID+"','"+this.Location+"');",1000);
133 break;
134 default:
135 TempHTML=TempHTML.replace("@Location","left:0px;top:0px");
136 break;
137 }
138 }else{
139 TempHTML="<div id=\""+this.ID+"\" style=\"position:fixed!important; @Location;width:auto;height:auto;margin:2px;padding:0px;width:"+this.Width+"px;height:"+this.Height+"px;\">";
140
141 switch(this.Location.toLowerCase()){
142 case "lefttop"://左上
143 TempHTML=TempHTML.replace("@Location","left:0px;top:0px");
144 break;
145 case "righttop"://右上
146 TempHTML=TempHTML.replace("@Location","right:0px;top:0px");
147 break;
148 case "leftbottom"://左下
149 TempHTML=TempHTML.replace("@Location","left:0px;bottom:0px");
150 break;
151 case "rightbottom"://右下
152 TempHTML=TempHTML.replace("@Location","right:0px;bottom:0px");
153 break;
154 case "left"://左居中
155 TempHTML=TempHTML.replace("@Location","left:0px;top:"+GetFloatOffsetTop(this.Height)+"px;");
156 setInterval("CalibrationlsFloatOffset('"+this.ID+"','"+this.Location+"');",1000);
157 break;
158 case "right"://右居中
159 TempHTML=TempHTML.replace("@Location","right:0px;top:"+GetFloatOffsetTop(this.Height)+"px;");
160 setInterval("CalibrationlsFloatOffset('"+this.ID+"','"+this.Location+"');",1000);
161 break;
162 case "centent"://居中
163 TempHTML=TempHTML.replace("@Location","right:"+GetFloatOffsetLeft(this.Width)+"px;top:"+GetFloatOffsetTop(this.Height)+"px;");
164 setInterval("CalibrationlsFloatOffset('"+this.ID+"','"+this.Location+"');",1000);
165 break;
166 default:
167 TempHTML=TempHTML.replace("@Location","left:0px;top:0px");
168 break;
169 }
170
171 }
172 if(this.CloseButton){
173 TempHTML+="<div style=\"font-size:12px;text-align:right\"><a href=\"javascript:void(0)\" style=\"color:#000000;text-decoration:none\" onclick=\"lsFloatClose('"+this.ID+"',"+this.IntervalShow+")\">关闭</a></div>";
174 }
175 TempHTML+="@InnerHTML</div>";
176
177 return TempHTML;
178 }
179 //初始化
180 lsFloat.prototype.Initialization=function(){
181 var Html=this.GetStyle();
182 Html=Html.replace("@InnerHTML",this.InnerHTML);
183 return Html;
184 }
185 ///显示
186 lsFloat.prototype.Show=function(){
187 this.Height+=18;
188 var html=this.Initialization();
189 document.write(html);
190 }
调用方法：
1 var ls_1=new lsFloat("ID","位置",关闭后再显示的间隔时间);
2 ls_1.InnerHTML="内容";
3 ls_1.CloseButton=关闭按钮(true,false)
4 ls_1.Width=内容宽;
5 ls_1.Height=内容高;
6 ls_1.Show(); 显示
7
8 完整调用例子
9 var ls_1=new lsFloat("temp1","left",3000);
10 ls_1.InnerHTML="<a href='http://kft.zoosnet.net/LR/Chatpre.aspx?id=KFT36998244 ' target='_blank' ><img src='http://www.cddfnzyy.com/images/left_zx.gif' border='0' usemap='#leftKfMap' alt='健康直通车'/></a>";
11 ls_1.CloseButton=true;
12 ls_1.Width=225;
13 ls_1.Height=645;
14 ls_1.Show()
位置参数:
View Code
1 左上:lefttop
2 右上:righttop
3 左下:leftbottom
4 右下:rightbottom
5 左居中:left
6 右居中:right
7 屏幕居中:centent
浙公网安备 33010602011771号