浮动的客户联系样式QQ模块层兼容各浏览器

Mozilla/Netscape Firefox 3.0.x Ok.
Firefox 2.0.x Ok.
Firefox 1.5 Ok.
Firefox 1.0.x Ok.
Microsoft Internet Explorer 7.0 Ok.
Internet Explorer 6.0 Ok.
Opera Opera 9.x Ok.
Opera 8.x Ok.
KHTML Google Chrome 0.2.x.x Ok.
Safari 3.1.2 Ok.
Konqueror 3.5.5 Ok.

 html code:

  1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2<meta name="description" content="涂聚文,捷为工作室,经营信息流,物流,人力资源流,资本流的系统解决方案的开发与设计和服务,geoVI studio.Geovin　Du. Systems Solution to Fund flow,and Information flow,and Material flow,and Control flow,and Human Resource.Applied software development,design and service。.">
  3<meta name="Robots" content="all index follow ">
  4<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="Author" content="涂聚文" />
<title>涂聚文</title></head>
  5<script language="vbscript">
  6'使用方法：使用include方法将本文件包含到程序文中，即在程序文的最后添加一行
  7'添加客服QQ方法：修改下面的adm_qq后面引号中的QQ号，多个QQ号用西文逗号隔开，QQ数量不限。
  8'如果你的网站的数据库中保存有QQ号，也可在这里直接读取数据库中的QQ
  9
 10
 11adm_qq="463588883,401620863"
 12
 13
 14QQ=split(adm_qq,",")
 15for N=0 to UBound(QQ)
 16MyQQ=MyQQ+QQ(N)+":"
 17next
 18</script>
 19
 20
 21<body>
 22
 23<script>
 24var online= new Array();
 25if (!document.layers)
 26//document.write('<div id="floatdiv" style=" position:absolute; 141px;height:50px;padding:1px;top:10px;left:605px">')
 27</script>
 28<div id="floatdiv" style="
 29    position:absolute;
 30    111px;height:50px;
 31    padding:1px;
 32    /*background:#FFFFFF;
 33    border:2px solid #FFFFFF;*/
 34    top:450px;
 35    right:0px;
 36    margin-right:1px;";
 37    
 38    >
 39<table border="0" width="100%" cellspacing="0" cellpadding="0">
 40<tr><td width="100%"><img border=0 src=images/kefu_up.gif></td></tr>
 41<script src="http://webpresence.qq.com/getonline?Type=1&<%=Myqq%>"></script>
 42
 43<% for N=0 to UBound(QQ) %>
 44
 45<tr><td  width="100%"  background=images/kefu_middle.gif>
 46<script>
 47if (online[<%=n%>]==0)
 48document.write("&nbsp;&nbsp;<img src=images/QQoffline.gif border=0><a class='qqb' target=blank href='http://wpa.qq.com/msgrd?V=1&Uin=<%=QQ(n)%>&Site=在线咨询&Menu=no' title='客服不在线，请留言'><%=QQ(n)%></a>");
 49else
 50document.write("&nbsp;&nbsp;<img src=images/QQonline.gif border=0><a class='qqa' target=blank href='http://wpa.qq.com/msgrd?V=1&Uin=<%=QQ(n)%>&Site=在线咨询&Menu=no' title='在线即时交谈'><%=QQ(n)%></a>");
 51</script >
 52</td>
 53</tr>
 54<%next%>
 55<tr><td width="100%"><img border=0 src=images/kefu_down.gif></td></tr>
 56</table>
 57</div>
 58<span id="script_source"><script type="text/javascript" src="js/floatmenu.js"></script>
 59</span>
 60
 61<script type="text/javascript" src="js/qq.js">
 62
 63</script>
 64
 65
 66
 67
 68
 69
 70
 71<script>
 72var online= new Array();
 73if (!document.layers)
 74//document.write('<div id="floatdiv" style=" position:absolute; 141px;height:50px;padding:1px;top:10px;left:605px">')
 75</script>
 76<div id="floatdiv" style="
 77    position:absolute;
 78    111px;height:50px;
 79    padding:1px;
 80    /*background:#FFFFFF;
 81    border:2px solid #FFFFFF;*/
 82    top:450px;
 83    right:0px;
 84    margin-right:1px;";
 85    
 86    >
 87<table border="0" width="100%" cellspacing="0" cellpadding="0">
 88<tr><td width="100%"><img border=0 src=images/kefu_up.gif></td></tr>
 89<script src="http://webpresence.qq.com/getonline?Type=1&<%=Myqq%>"></script>
 90
 91<% for N=0 to UBound(QQ) %>
 92
 93<tr><td  width="100%"  background=images/kefu_middle.gif>
 94<script>
 95if (online[<%=n%>]==0)
 96document.write("&nbsp;&nbsp;<img src=images/QQoffline.gif border=0><a class='qqb' target=blank href='http://wpa.qq.com/msgrd?V=1&Uin=<%=QQ(n)%>&Site=在线咨询&Menu=no' title='客服不在线，请留言'><%=QQ(n)%></a>");
 97else
 98document.write("&nbsp;&nbsp;<img src=images/QQonline.gif border=0><a class='qqa' target=blank href='http://wpa.qq.com/msgrd?V=1&Uin=<%=QQ(n)%>&Site=在线咨询&Menu=no' title='在线即时交谈'><%=QQ(n)%></a>");
 99</script >
100</td>
101</tr>
102<%next%>
103<tr><td width="100%"><img border=0 src=images/kefu_down.gif></td></tr>
104</table>
105</div>
106<span id="script_source"><script type="text/javascript" src="js/floatmenu.js"></script>
107</span>
108
109<script type="text/javascript" src="js/qq.js">
110
111</script>
112</body>
113
114</html>

 floatmenu.js code:

  1// JavaScript Document
  2<!--
  3/* Script by: www.dusystem.com
  4 * Version: 20071017
  5 * Latest version:
  6 * www.dusystem.com/
  7 */
  8var floatingMenuId = 'floatdiv';
  9var floatingMenu =
 10{
 11    targetX: -110,//确定位置 X为横坐标 Y为纵坐标
 12    targetY: 280,
 13
 14    hasInner: typeof(window.innerWidth) == 'number',
 15    hasElement: typeof(document.documentElement) == 'object'
 16        && typeof(document.documentElement.clientWidth) == 'number',
 17
 18    menu:
 19        document.getElementById
 20        ? document.getElementById(floatingMenuId)
 21        : document.all
 22          ? document.all[floatingMenuId]
 23          : document.layers[floatingMenuId]
 24};
 25
 26floatingMenu.move = function ()
 27{
 28    floatingMenu.menu.style.left = floatingMenu.nextX + 'px';
 29    floatingMenu.menu.style.top = floatingMenu.nextY + 'px';
 30}
 31
 32floatingMenu.computeShifts = function ()
 33{
 34    var de = document.documentElement;
 35
 36    floatingMenu.shiftX =  
 37        floatingMenu.hasInner  
 38        ? pageXOffset  
 39        : floatingMenu.hasElement  
 40          ? de.scrollLeft  
 41          : document.body.scrollLeft;  
 42    if (floatingMenu.targetX < 0)
 43    {
 44        floatingMenu.shiftX +=
 45            floatingMenu.hasElement
 46            ? de.clientWidth
 47            : document.body.clientWidth;
 48    }
 49
 50    floatingMenu.shiftY = 
 51        floatingMenu.hasInner
 52        ? pageYOffset
 53        : floatingMenu.hasElement
 54          ? de.scrollTop
 55          : document.body.scrollTop;
 56    if (floatingMenu.targetY < 0)
 57    {
 58        if (floatingMenu.hasElement && floatingMenu.hasInner)
 59        {
 60            // Handle Opera 8 problems
 61            floatingMenu.shiftY +=
 62                de.clientHeight > window.innerHeight
 63                ? window.innerHeight
 64                : de.clientHeight
 65        }
 66        else
 67        {
 68            floatingMenu.shiftY +=
 69                floatingMenu.hasElement
 70                ? de.clientHeight
 71                : document.body.clientHeight;
 72        }
 73    }
 74}
 75
 76floatingMenu.calculateCornerX = function()
 77{
 78    if (floatingMenu.targetX != 'center')
 79        return floatingMenu.shiftX + floatingMenu.targetX;
 80
 81    var width = parseInt(floatingMenu.menu.offsetWidth);
 82
 83    var cornerX =
 84        floatingMenu.hasElement
 85        ? (floatingMenu.hasInner
 86           ? pageXOffset
 87           : document.documentElement.scrollLeft) + 
 88          (document.documentElement.clientWidth - width)/2
 89        : document.body.scrollLeft + 
 90          (document.body.clientWidth - width)/2;
 91    return cornerX;
 92};
 93
 94floatingMenu.calculateCornerY = function()
 95{
 96    if (floatingMenu.targetY != 'center')
 97        return floatingMenu.shiftY + floatingMenu.targetY;
 98
 99    var height = parseInt(floatingMenu.menu.offsetHeight);
100
101    // Handle Opera 8 problems
102    var clientHeight = 
103        floatingMenu.hasElement && floatingMenu.hasInner
104        && document.documentElement.clientHeight 
105            > window.innerHeight
106        ? window.innerHeight
107        : document.documentElement.clientHeight
108
109    var cornerY =
110        floatingMenu.hasElement
111        ? (floatingMenu.hasInner  
112           ? pageYOffset
113           : document.documentElement.scrollTop) + 
114          (clientHeight - height)/2
115        : document.body.scrollTop + 
116          (document.body.clientHeight - height)/2;
117    return cornerY;
118};
119
120floatingMenu.doFloat = function()
121{
122    var stepX, stepY;
123
124    floatingMenu.computeShifts();
125
126    var cornerX = floatingMenu.calculateCornerX();
127
128    var stepX = (cornerX - floatingMenu.nextX) * .07;
129    if (Math.abs(stepX) < .5)
130    {
131        stepX = cornerX - floatingMenu.nextX;
132    }
133
134    var cornerY = floatingMenu.calculateCornerY();
135
136    var stepY = (cornerY - floatingMenu.nextY) * .07;
137    if (Math.abs(stepY) < .5)
138    {
139        stepY = cornerY - floatingMenu.nextY;
140    }
141
142    if (Math.abs(stepX) > 0 ||
143        Math.abs(stepY) > 0)
144    {
145        floatingMenu.nextX += stepX;
146        floatingMenu.nextY += stepY;
147        floatingMenu.move();
148    }
149
150    setTimeout('floatingMenu.doFloat()', 20);
151};
152
153// addEvent designed by Aaron Moore
154floatingMenu.addEvent = function(element, listener, handler)
155{
156    if(typeof element[listener] != 'function' || 
157       typeof element[listener + '_num'] == 'undefined')
158    {
159        element[listener + '_num'] = 0;
160        if (typeof element[listener] == 'function')
161        {
162            element[listener + 0] = element[listener];
163            element[listener + '_num']++;
164        }
165        element[listener] = function(e)
166        {
167            var r = true;
168            e = (e) ? e : window.event;
169            for(var i = element[listener + '_num'] -1; i >= 0; i--)
170            {
171                if(element[listener + i](e) == false)
172                    r = false;
173            }
174            return r;
175        }
176    }
177
178    //if handler is not already stored, assign it
179    for(var i = 0; i < element[listener + '_num']; i++)
180        if(element[listener + i] == handler)
181            return;
182    element[listener + element[listener + '_num']] = handler;
183    element[listener + '_num']++;
184};
185
186floatingMenu.init = function()
187{
188    floatingMenu.initSecondary();
189    floatingMenu.doFloat();
190};
191
192// Some browsers init scrollbars only after
193// full document load.
194floatingMenu.initSecondary = function()
195{
196    floatingMenu.computeShifts();
197    floatingMenu.nextX = floatingMenu.calculateCornerX();
198    floatingMenu.nextY = floatingMenu.calculateCornerY();
199    floatingMenu.move();
200}
201
202if (document.layers)
203    floatingMenu.addEvent(window, 'onload', floatingMenu.init);
204else
205{
206    floatingMenu.init();
207    floatingMenu.addEvent(window, 'onload',
208        floatingMenu.initSecondary);
209}
210
211//-->

 qq.js code:

 1// JavaScript Document 涂聚文 geovindu@163.com www.dusystem.com
 2<!--
 3function move_upper_left()
 4{
 5floatingMenu.targetX=10;
 6floatingMenu.targetY=10;
 7}
 8
 9function move_upper_center()
10{
11floatingMenu.targetX='center';
12floatingMenu.targetY=10;
13}
14
15function move_upper_right()
16{
17floatingMenu.targetX=-250;
18floatingMenu.targetY=10;
19}
20
21function move_center_left()
22{
23floatingMenu.targetX=10;
24floatingMenu.targetY='center';
25}
26
27function move_center_center()
28{
29floatingMenu.targetX='center';
30floatingMenu.targetY='center';
31}
32
33function move_center_right()
34{
35floatingMenu.targetX=-250;
36floatingMenu.targetY='center';
37}
38
39function move_lower_left()
40{
41floatingMenu.targetX=10;
42floatingMenu.targetY=-110;
43}
44
45function move_lower_center()
46{
47floatingMenu.targetX='center';
48floatingMenu.targetY=-110;
49}
50
51function move_lower_right()
52{
53floatingMenu.targetX=-250;
54floatingMenu.targetY=-110;
55}
56//-->
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/geovindu/p/1545211.html