|
浮动QQ在线客服&网站QQ在线咨询
& V! Q7 b% I1 T& W, D" P9 T第一步:先把以下代码保存为kefu.htm
6 e" z/ Q2 M* U* l第二步:按橙色说明修改
+ K( u/ v9 D8 w1 s" M7 K绿色部分是要修改的内容,html文档中不包括说明文字:
) e) B/ ~( r* x; K6 [* @# w6 o' L<html>
& ^* u9 ?9 R9 H! W* Z9 t; S<head>
" D, H# ~, |+ [& w3 f; t<meta http-equiv="Content-Type" c>
6 v1 Z) x- J- y- u$ o( G. i<link rel="stylesheet" href="images/ im.css" type="text/css"> 5 \# b/ b8 ~/ |% l; ~2 d
</head> 1 ?2 s0 |) j; Q
<script>
6 e7 `2 T6 n J* s1 M4 m1 i. }; bvar online= new Array();
! e3 L7 Q: l Z y& P. p9 x4 Wif (!document.layers) 8 ` r1 J6 _* I a0 b, K
document.write('<div id="divStayTopLeft" style="position:absolute">') 6 O" c" L* O. l* ?
</script> : [) P3 L D. T
<layer id="divStayTopLeft">
% g( R% }5 j; o5 y: O<table border="0" width="110" cellspacing="0" cellpadding="0">
& D$ h0 e2 ]9 M<tr><td width="110"><img border=0 src=images/kefu_up.gif></td></tr> 0 g& _$ V- k' ~ ~/ Z* I
<script src="http://webpresence.qq.com/getonline?Type=1&27089965:27043921:56129874:"></script>
. F1 u, U; q% B1 i F! o" O将绿色部分修改成你的所有客服QQ,多个QQ用半角冒号隔开,最后一个QQ号后面也必须以半角冒号结束 * m7 l# o( }) B( j, }$ y" D
' O5 [) k7 ~3 H, L
以下部分显示第1个客服QQ,注意:online[0] ; ^' w' _) Z' x. m8 S! o/ p
<tr><td valign=middle background=images/kefu_middle.gif> ' O9 Q. ^5 y0 N
<script>
( P! q3 m4 @2 S. Lif (online[0]==0) & l+ ?1 M6 P2 t& `' N, }" m
document.write(" <img src=images/QQoffline.gif border=0 align=middle><a class='qqb' target=blank href='http://wpa.qq.com/msgrd?V=1&Uin=27089965&Site=在线咨询&Menu=no' title='客服不在线,请留言'>售前咨询</a>");
5 ~9 W: t; e+ q6 U; ]2 w& {else
1 o5 h6 H0 q( Z5 p+ o \% {document.write(" <img src=images/QQonline.gif border=0 align=middle><a class='qqa' target=blank href='http://wpa.qq.com/msgrd?V=1&Uin=27089965&Site=在线咨询&Menu=no' title='在线即时交谈'>售前咨询</a>"); : s P* W+ g" T! l% \. M! ^9 d
</script >
# _8 [6 q% W2 e9 J. g</td></tr>
$ \& U* B- h4 \! f9 r: l/ C + V- v$ E) n' X- l4 B
以下部分显示第2个客服QQ,注意:online[1]
7 C4 C& k u- H2 J3 ?<tr><td valign=middle background=images/kefu_middle.gif> * p5 l$ g! e1 M: u
<script>
4 S" v z$ P# R8 p5 d( E# uif (online[1]==0)
2 O2 f# p: r# x) `) u; ]9 [document.write(" <img src=images/QQoffline.gif border=0 align=middle><a class='qqb' target=blank href='http://wpa.qq.com/msgrd?V=1&Uin=27043921&Site=在线咨询&Menu=no' title='客服不在线,请留言'>技术支持</a>");
0 V: o& x/ \9 s' ]4 K melse
$ G+ a- B! i9 _3 J* Sdocument.write(" <img src=images/QQonline.gif border=0 align=middle><a class='qqa' target=blank href='http://wpa.qq.com/msgrd?V=1&Uin=27043921&Site=在线咨询&Menu=no' title='在线即时交谈'>技术支持</a>");
/ j+ E8 v% [8 T/ X% O H' x</script >
0 k+ |) D6 h4 y+ f `' U</td></tr> " Q2 N/ r% F: ?# y2 }& D) k9 K7 ^
' E* f2 W% b9 V+ P( D# h f* C" P8 ?
以下部分显示第3个客服QQ,注意:online[2]。
1 W8 q& H4 z9 U* ?* W4 {<tr><td valign=middle background=images/kefu_middle.gif>
9 C: S- D, p5 y3 @<script> ! t7 P. k' Y" K) @
if (online[2]==0) 4 C3 `9 i" @" S* R
document.write(" <img src=images/QQoffline.gif border=0 align=middle><a class='qqb' target=blank href='http://wpa.qq.com/msgrd?V=1&Uin=240434782&Site=在线咨询&Menu=no' title='客服不在线,请留言'>代理合作</a>");
4 \# p2 L3 _# Y* @& v$ Xelse # F* ]9 x/ ]" ?4 M2 i7 U9 h& m4 g
document.write(" <img src=images/QQonline.gif border=0 align=middle><a class='qqa' target=blank href='http://wpa.qq.com/msgrd?V=1&Uin=240434782&Site=在线咨询&Menu=no' title='在线即时交谈'>代理合作</a>");
D; [8 q' r( i% N0 e</script > ; U$ A1 _6 [, e$ C! c" m
</td></tr>
; O/ w" {! Z* V9 B
* U7 a* J& e6 B1 T+ B多个QQ,按以上规律复制上面的代码后修改online[0] 中的数字(第1个QQ为online[0]、第2个QQ为online[1]、第3个为online[2],以此类推)和QQ号(每组代码中有2处位置改为QQ号、2处位置改为昵称)。
+ u$ n) H' b, E7 r5 M [$ }* m2 r4 _ . \6 \% @5 q5 Y2 x: U: Z9 ]
<tr><td width="110"><img border=0 src=images/kefu_down.gif></td></tr>
; H) d/ } I. n</table>
7 K! t4 G& i: `! d* v; b( K% W" s</layer>
) l& N: E- C" \% ~<script type="text/javascript">
& {7 b" C& Z# ~( F* d7 U//Enter "frombottom" or "fromtop" 7 b; r I! d: ?) C2 D4 s
var verticalpos="frombottom" ( w8 @& ]% Q4 @
if (!document.layers) 0 c3 \/ G; L" \' S7 s# R
document.write('</div>')
g; i- C% N8 b! gfunction JSFX_FloatTopDiv()
* }+ R1 M3 S: \{ 8 R$ Y. y: F" h) u0 `
下面的var startX =3是水平位置,250是垂直位置;默认情况在屏幕左侧显示,若要改为右侧显示,修改3的值(var startX =3改为var startX =screen.width-150)即可。 4 F% z. S9 b9 Y3 t
var startX =3, : F# j. E1 {* Y+ S0 v+ g9 `
startY = 250;
$ d+ i: h, n- [4 e5 U var ns = (navigator.appName.indexOf("Netscape") != -1); 8 A$ K6 \8 c0 d- N( d
var d = document; 7 M/ L/ z u6 M g& c6 g) F6 q
function ml(id) 2 a" h7 U( Y& z' H; A! V8 S: ^
{
1 ?9 ]# \! Z1 } var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id]; - n* O, q) g: l" }9 F( Z
if(d.layers)el.style=el;
! K8 R: w3 V) @/ u c& y0 F" Q# P# W ? el.sP=function(x,y){this.style.left=x;this.style.top=y;};
4 o6 [# m2 T3 [6 L: Z5 Y9 ~/ V el.x = startX; 1 ]% f/ d/ l5 D* G' [: s: B
if (verticalpos=="fromtop")
$ w) i" n4 D$ x; |5 M: W el.y = startY;
0 s* U0 t" w/ i% I$ x, F$ O/ A else{ $ u0 ?2 Q" k: l$ k7 I# i
el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
% g! P; P1 n% E% V( G. D' p/ u3 Y el.y -= startY;
- g2 y. p) y2 G* {7 j8 d } 1 J6 I9 r; l% \6 n. e! r/ {1 e
return el;
" d1 j0 R. V. |6 D/ E+ i9 K }
* | |, f9 l4 _5 Z, I4 V, W& } window.stayTopLeft=function()
3 k, ?! V2 g5 g7 t {
- `- O V% p* g P8 g if (verticalpos=="fromtop"){ 1 z+ c. P; U5 n2 ~& y1 E1 _
var pY = ns ? pageYOffset : document.body.scrollTop; * e J; w9 X1 A& d7 ]2 G8 w
ftlObj.y += (pY + startY - ftlObj.y)/8;
/ D* Z8 v: D" e, M5 z } ! F. @+ X) K7 F& R
else{
3 l& {% n: A" s- r var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight; 1 t5 ?' g) ^% C; _: I& _
ftlObj.y += (pY - startY - ftlObj.y)/8; 2 a% j$ B1 i% J* `, j% y e
}
$ u* X5 I) G8 G ftlObj.sP(ftlObj.x, ftlObj.y); - r% z$ z+ B" s7 ~) I: y
setTimeout("stayTopLeft()", 10);
% u2 O7 k; X; g" K } 4 L; o9 ^, I, r1 N. o' Z
ftlObj = ml("divStayTopLeft"); ' Y$ d6 j6 E8 W' O9 P! x
stayTopLeft(); ; J+ }( I7 a) U) ?
}
0 ]0 [2 w0 Q' E+ z) oJSFX_FloatTopDiv();
6 `- h, } u, p9 m</script> @" P6 \: Y7 [: I/ ^
</html> 8 W2 X) C! i# |$ H5 j3 i
第三步:下载相关素材(在图片上点右键-图片另存为…),保存到images目录下。 + u- k3 S# N/ m. w5 |( W$ R
http://imis.qq.com/images/wpa/images/kefu_up.gif
- o* O+ T- w2 H3 g: xhttp://imis.qq.com/images/wpa/images/ kefu_middle.gif
! d" f" E" {+ k5 M8 C$ Ahttp://imis.qq.com/images/wpa/images/ kefu_down.gif # ^- T W6 T$ {$ H1 |1 V, ~
http://imis.qq.com/images/wpa/images/ QQonline.gif * _' f) k1 p' K: L) g
http://imis.qq.com/images/wpa/images/ QQoffline.gif & t' J6 L( \2 J
http://imis.qq.com/css/im.css
. {4 W+ Q$ [* a第四步:将所有文件和目录保持原有结构(kefu.htm和文件夹images),拷贝到您的网站目录中,在你要添加“浮动QQ在线客服”的页面的最后面添加一行:<!--#include file="kefu.htm"--> |