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

1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2

'使用方法：使用include方法将本文件包含到程序文中，即在程序文的最后添加一行
7

'添加客服QQ方法：修改下面的adm_qq后面引号中的QQ号，多个QQ号用西文逗号隔开，QQ数量不限。
8

'如果你的网站的数据库中保存有QQ号，也可在这里直接读取数据库中的QQ
9

10

11

adm_qq="463588883,401620863"
12

13

14

QQ=split(adm_qq,",")
15

for N=0 to UBound(QQ)
16

MyQQ=MyQQ+QQ(N)+":"
17

next
18

</script>
19

20

21

<body>
22

23

<script>
24

var online= new Array();
25

if (!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

43

<% for N=0 to UBound(QQ) %>
44

45

<tr><td width="100%" background=images/kefu_middle.gif>
46

<script>
47

if (online[<%=n%>]==0)
48

document.write("  <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>");
49

else
50

document.write("  <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

63

</script>
64

65

66

67

68

69

70

71

<script>
72

var online= new Array();
73

if (!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

91

<% for N=0 to UBound(QQ) %>
92

93

<tr><td width="100%" background=images/kefu_middle.gif>
94

<script>
95

if (online[<%=n%>]==0)
96

document.write("  <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>");
97

else
98

document.write("  <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

111

</script>
112

</body>
113

114

</html>

1

// JavaScript Document
2

<!--
3

/* Script by: www.dusystem.com
4

* Version: 20071017
5

* Latest version:
6

* www.dusystem.com/
7

*/
8

var floatingMenuId = 'floatdiv';
9

var 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

26

floatingMenu.move = function ()
27

{
28

floatingMenu.menu.style.left = floatingMenu.nextX + 'px';
29

floatingMenu.menu.style.top = floatingMenu.nextY + 'px';
30

}
31

32

floatingMenu.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

76

floatingMenu.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

94

floatingMenu.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

120

floatingMenu.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
154

floatingMenu.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

186

floatingMenu.init = function()
187

{
188

floatingMenu.initSecondary();
189

floatingMenu.doFloat();
190

};
191

192

// Some browsers init scrollbars only after
193

// full document load.
194

floatingMenu.initSecondary = function()
195

{
196

floatingMenu.computeShifts();
197

floatingMenu.nextX = floatingMenu.calculateCornerX();
198

floatingMenu.nextY = floatingMenu.calculateCornerY();
199

floatingMenu.move();
200

}
201

202

if (document.layers)
203

floatingMenu.addEvent(window, 'onload', floatingMenu.init);
204

else
205

{
206

floatingMenu.init();
207

floatingMenu.addEvent(window, 'onload',
208

floatingMenu.initSecondary);
209

}
210

211

//-->

1

// JavaScript Document 涂聚文 geovindu@163.com www.dusystem.com
2

<!--
3

function move_upper_left()
4

{
5

floatingMenu.targetX=10;
6

floatingMenu.targetY=10;
7

}
8

9

function move_upper_center()
10

{
11

floatingMenu.targetX='center';
12

floatingMenu.targetY=10;
13

}
14

15

function move_upper_right()
16

{
17

floatingMenu.targetX=-250;
18

floatingMenu.targetY=10;
19

}
20

21

function move_center_left()
22

{
23

floatingMenu.targetX=10;
24

floatingMenu.targetY='center';
25

}
26

27

function move_center_center()
28

{
29

floatingMenu.targetX='center';
30

floatingMenu.targetY='center';
31

}
32

33

function move_center_right()
34

{
35

floatingMenu.targetX=-250;
36

floatingMenu.targetY='center';
37

}
38

39

function move_lower_left()
40

{
41

floatingMenu.targetX=10;
42

floatingMenu.targetY=-110;
43

}
44

45

function move_lower_center()
46

{
47

floatingMenu.targetX='center';
48

floatingMenu.targetY=-110;
49

}
50

51

function move_lower_right()
52

{
53

floatingMenu.targetX=-250;
54

floatingMenu.targetY=-110;
55

}
56

//-->

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.
Microsoft	Internet Explorer 6.0	Ok.
Opera	Opera 9.x	Ok.
Opera	Opera 8.x	Ok.
KHTML	Google Chrome 0.2.x.x	Ok.
	Safari 3.1.2	Ok.
	Konqueror 3.5.5	Ok.