|
浮动QQ在线客服&网站QQ在线咨询 % U+ l$ K" u$ l
第一步:先把以下代码保存为kefu.htm $ y' \8 @4 l1 a1 F$ \9 W
第二步:按橙色说明修改 : v/ D* Y) T: l: @; A
绿色部分是要修改的内容,html文档中不包括说明文字: " z7 m+ H# x4 o! h w+ \9 L9 C
<html> # o$ w' i: k& [& l H2 u, E
<head> ' ^# s8 Q. S9 d, f% K5 h6 J
<meta http-equiv="Content-Type" c>
+ z. i% t/ S8 B" [! O/ B. U! i<link rel="stylesheet" href="images/ im.css" type="text/css">
2 A5 a! K, @8 _</head>
6 W3 G5 W9 X8 s) Z0 _! C2 Z9 I' D6 v<script>
9 J" d h; R) a# r/ V, tvar online= new Array();
* v( b5 i X# a" h! Lif (!document.layers) " `6 P4 t! F* X" d9 G. ?" Y
document.write('<div id="divStayTopLeft" style="position:absolute">')
5 b o) Y# g; U: ]; h! u- `% I0 f</script> , v+ H' f* _7 l/ p8 i* \( |
<layer id="divStayTopLeft"> 5 n g. j6 p r7 j1 Q
<table border="0" width="110" cellspacing="0" cellpadding="0"> 6 `1 w5 b& {3 t# m' Z7 z3 O1 z
<tr><td width="110"><img border=0 src=images/kefu_up.gif></td></tr>
1 X4 M: k2 d, o8 n7 h; l) r<script src="http://webpresence.qq.com/getonline?Type=1&27089965:27043921:56129874:"></script> $ T" S% d8 L& O$ f$ k6 ~
将绿色部分修改成你的所有客服QQ,多个QQ用半角冒号隔开,最后一个QQ号后面也必须以半角冒号结束
) v! c$ ~1 e9 n4 e 4 w8 f R, F* g. }$ @
以下部分显示第1个客服QQ,注意:online[0] % T. Z% G$ Q( h( v2 N9 ` d- O
<tr><td valign=middle background=images/kefu_middle.gif> % G- Q0 Q* X5 e# H5 p5 l+ P6 @, x
<script>
' I% h* u! Y" z# e" g5 Lif (online[0]==0)
6 ]0 u+ L r+ T& ?& Qdocument.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 B% K% l# a! K. N7 d$ P
else
0 E G' I P; c" a6 Cdocument.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>");
2 O/ Q+ D* `, Q0 j$ r</script > $ C# |9 A0 e2 g; h3 W
</td></tr>
8 d" c# O9 X g! ^$ B) `
2 u7 L) |* m* K J" o以下部分显示第2个客服QQ,注意:online[1]
9 ^$ l( i4 E+ a1 ? P( W9 q<tr><td valign=middle background=images/kefu_middle.gif>
- k/ U& ^' T: w1 {6 W$ T<script> ) K) ?3 |$ @* J0 o4 g
if (online[1]==0) - @) P4 s f+ \1 ]- F3 ~
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>"); : P$ L4 x A" k& F
else
& S2 I8 J/ y+ b: qdocument.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>"); ) a7 s9 U9 N" X" s' i
</script >
8 V6 N# w- }( J8 d" q" e</td></tr> 9 c7 p5 P D3 g
7 O; T; j# k7 H8 ^+ R以下部分显示第3个客服QQ,注意:online[2]。 ' n, X% H8 L% w6 `1 p# _
<tr><td valign=middle background=images/kefu_middle.gif>
7 Q+ @4 K( O. n K& S<script>
+ M X- o; I% w& a- p$ B mif (online[2]==0) ) c2 z! I# V& i2 ]
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>");
( a+ X! d8 K' h/ `( p: B/ Nelse 6 p% t' u( m1 ]' t9 @7 S+ |) c1 ~5 K
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>");
& i! R; c! \' b</script >
% j3 k. @. T8 o, x</td></tr>
' q+ D u7 |0 k5 |/ i+ A. i ) D1 a& ]. g0 v5 D6 p/ ?' P
多个QQ,按以上规律复制上面的代码后修改online[0] 中的数字(第1个QQ为online[0]、第2个QQ为online[1]、第3个为online[2],以此类推)和QQ号(每组代码中有2处位置改为QQ号、2处位置改为昵称)。 8 V% m! ]1 [3 j b! U& |: |6 F
5 K: h& l! F# Z2 s; V
<tr><td width="110"><img border=0 src=images/kefu_down.gif></td></tr> \% W' j6 C: G1 P, i7 p1 }
</table> 7 ?& [3 X$ a. }
</layer> + y. h I3 X6 g% i
<script type="text/javascript">
& x" \$ B2 j, }6 m/ B) N/ }//Enter "frombottom" or "fromtop" $ u9 s) U# x2 x$ \( P) w4 ?, R/ c* b
var verticalpos="frombottom"
9 e- W! L, g! `3 L4 M8 \if (!document.layers) " ^2 \% Y/ A6 J1 ^6 q
document.write('</div>')
; A* b% r7 L6 I6 c0 f# Zfunction JSFX_FloatTopDiv() 4 a5 e, C; W1 i2 T
{
& I, t0 D5 y1 R' U) M下面的var startX =3是水平位置,250是垂直位置;默认情况在屏幕左侧显示,若要改为右侧显示,修改3的值(var startX =3改为var startX =screen.width-150)即可。
" ~, N1 _/ ^0 r0 q8 d T9 \" u var startX =3, 4 [7 G1 ?6 d3 A6 b) G: D
startY = 250;
! O3 u* }3 m5 L( ~( D& O2 u# h var ns = (navigator.appName.indexOf("Netscape") != -1);
; v3 K1 d: D% C6 ~1 v } var d = document; " k. A- Q; C7 ]$ A; @ Q; @
function ml(id) & x. r5 H$ \- Q* h+ ?/ t. n
{ ' [4 _- D* I- E d4 n
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
% s E; K [. }/ L- O7 i) n if(d.layers)el.style=el; / m' e" i7 j' ?- q3 b
el.sP=function(x,y){this.style.left=x;this.style.top=y;}; 5 j8 N: [/ b! |5 e9 _
el.x = startX;
- i3 }8 B1 [% ? if (verticalpos=="fromtop") # t5 J A& P! o) a, ]% Y, v
el.y = startY; 2 c" i5 W* g, w- w5 f* t' E; H
else{ & J; K! C+ [' z) l$ Y9 U. Y& n% n
el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
! L( ]9 m9 ~% o G m% v2 S a2 | el.y -= startY; ! ?$ C2 q* F+ j. `& v1 O
}
. y8 U+ F+ Y I' ? e return el; 8 t! K- T% W: O% u
}
& @+ k. S$ ~5 T5 i5 [; N7 }: o window.stayTopLeft=function() ( \' v2 Q8 E) g* @* z
{
4 y) ]8 G1 @ g$ z0 Y if (verticalpos=="fromtop"){ ' h) d$ E/ |4 q p3 S
var pY = ns ? pageYOffset : document.body.scrollTop; # s3 d, M$ S/ u& C) O
ftlObj.y += (pY + startY - ftlObj.y)/8; 0 B5 K# q2 d# `* [: d: B
}
4 e. o2 n0 R' c! [9 S else{
/ Z& w4 n, O1 I! @ var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
1 {3 j: f/ b0 ]# O ftlObj.y += (pY - startY - ftlObj.y)/8;
3 B- H' z& }( e/ T R0 m8 ] }
4 @* Y3 A5 ?$ u6 \: g( o' p G ftlObj.sP(ftlObj.x, ftlObj.y);
% \) F# }. |- u0 J" t setTimeout("stayTopLeft()", 10);
# N: {9 |; [2 a } ; j8 a6 y1 y9 d, U1 K
ftlObj = ml("divStayTopLeft");
( T+ G: I- p' E; r; Q- P- B/ a stayTopLeft();
+ ]9 t0 Q- A& g1 \; c% j}
- k5 S, k7 B$ t; UJSFX_FloatTopDiv(); - T: n8 Y8 `5 ]' ?* S* U
</script>
2 ~- Y2 A$ W9 b7 I2 b: s</html>
9 Y! Q9 p S6 I( k第三步:下载相关素材(在图片上点右键-图片另存为…),保存到images目录下。
. s5 p5 ~5 j( R: q9 j' V$ }5 W0 ghttp://imis.qq.com/images/wpa/images/kefu_up.gif
1 V. J% I; I) P4 {, B) L) E" V9 Qhttp://imis.qq.com/images/wpa/images/ kefu_middle.gif
8 b' c; z; s2 d; qhttp://imis.qq.com/images/wpa/images/ kefu_down.gif
. O6 i& E4 Q. ?* t) ehttp://imis.qq.com/images/wpa/images/ QQonline.gif
. [! N, Q5 f! Shttp://imis.qq.com/images/wpa/images/ QQoffline.gif ( q/ O* q8 p$ i7 i! z# F- k
http://imis.qq.com/css/im.css
! R/ J4 b8 t" ^& K' r第四步:将所有文件和目录保持原有结构(kefu.htm和文件夹images),拷贝到您的网站目录中,在你要添加“浮动QQ在线客服”的页面的最后面添加一行:<!--#include file="kefu.htm"--> |