|
浮动QQ在线客服&网站QQ在线咨询 $ y/ Q5 a8 u9 w4 s
第一步:先把以下代码保存为kefu.htm
! p" q$ V8 z7 I% E第二步:按橙色说明修改 ' d' C; X3 I# f/ j
绿色部分是要修改的内容,html文档中不包括说明文字: 2 m! _/ ]9 i, r3 N6 B& v
<html>
; x6 |* X' D, y; {+ M7 ^6 U/ z<head> , @& b8 N. [8 {/ V
<meta http-equiv="Content-Type" c> ) H9 A8 _. x9 `- O( j& K
<link rel="stylesheet" href="images/ im.css" type="text/css">
: \& {, D/ ^/ c8 \1 ~! q- q1 L' `: m</head> : {: R- M9 [2 Z' o2 m
<script>
& A4 t2 z! ?3 jvar online= new Array(); & w0 Z% k# D( X, X; V" ]+ U T
if (!document.layers) ; r+ i' g; Z, j- j' F
document.write('<div id="divStayTopLeft" style="position:absolute">')
5 h' m& }3 g5 N3 ^' k</script>
9 |# d7 V/ l( E4 F<layer id="divStayTopLeft"> 9 F# K( S. h" U; |) X8 k3 ?' l
<table border="0" width="110" cellspacing="0" cellpadding="0"> $ z7 Q. A3 j' J: Q' {6 h0 e$ [
<tr><td width="110"><img border=0 src=images/kefu_up.gif></td></tr> - L7 x$ X$ u8 |" L
<script src="http://webpresence.qq.com/getonline?Type=1&27089965:27043921:56129874:"></script> 0 ~6 t' D( f3 N: p
将绿色部分修改成你的所有客服QQ,多个QQ用半角冒号隔开,最后一个QQ号后面也必须以半角冒号结束
$ p) t( y% c p+ C
% r* Z7 g) H( n5 \# @以下部分显示第1个客服QQ,注意:online[0]
b+ O7 B# C; c! z<tr><td valign=middle background=images/kefu_middle.gif> / h D+ H+ Q( [: D o
<script> ' c) D+ |+ z* |" s Y4 x/ v
if (online[0]==0) 7 s/ O6 G% l4 h2 b- j. u& W
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>");
1 R/ T( s- h# U1 W+ z- y9 |' s7 felse
! q2 S/ M5 b, o5 Z- X bdocument.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>");
* Y- Z3 X% x8 ^4 X( \</script >
1 C: r8 L% E' s* B$ j7 L</td></tr> , { D: A) r# W b& F) ^. J/ P
7 Y1 h) U n: |0 W( e7 T$ E
以下部分显示第2个客服QQ,注意:online[1] 3 a* ^6 V A' @* [. H7 c
<tr><td valign=middle background=images/kefu_middle.gif>
1 P- H; m9 w! e! P) Q4 D<script>
9 u! g! Y( S( ]" g9 P9 Nif (online[1]==0)
1 w, N; X2 }) E P2 c" \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>"); : R7 q# R5 t! D# m5 a
else
. H" U; [- r, m" ~: k+ 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=27043921&Site=在线咨询&Menu=no' title='在线即时交谈'>技术支持</a>"); # z& a' j4 C' W: O) z- g% j
</script > 8 O- X2 l" i8 S" x4 k) O
</td></tr>
) t/ G* e( o% m5 H' }
' u% i A, Y$ l以下部分显示第3个客服QQ,注意:online[2]。
5 u) v* S7 i4 a: G! P<tr><td valign=middle background=images/kefu_middle.gif>
4 r+ ]5 \# @0 h2 Z V ^<script> ! z% k4 n- G5 r; g
if (online[2]==0)
0 b9 L1 P% ~4 T hdocument.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>"); 9 }+ k* z2 S/ O* H+ p
else
9 O! R9 F p- U2 n2 n8 n% rdocument.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>"); 7 O. W# k* g+ X5 a1 m5 n. z$ l
</script > ' \! Z% M6 H1 T
</td></tr> 0 w) F# O% t0 Y4 D$ i, X
; g2 D* u& s. [. o P+ j4 g" N多个QQ,按以上规律复制上面的代码后修改online[0] 中的数字(第1个QQ为online[0]、第2个QQ为online[1]、第3个为online[2],以此类推)和QQ号(每组代码中有2处位置改为QQ号、2处位置改为昵称)。 ! w4 Z h; d/ Q) j* p0 C7 {! D
: i, k G* O5 Y( u$ |
<tr><td width="110"><img border=0 src=images/kefu_down.gif></td></tr> 5 L/ q m1 ]/ b2 l' Z1 ^) ?* p
</table> ' L0 C' H3 }* X- x+ l
</layer>
; ~6 U3 J7 Y3 x- J; V2 G<script type="text/javascript">
# J4 T9 y$ i1 ~5 j; l8 X//Enter "frombottom" or "fromtop"
! S3 t5 F' y n: S* W5 w. u$ Dvar verticalpos="frombottom"
$ e5 e3 n$ }& L" [- ~if (!document.layers)
: g* }; s5 R: w- Q$ n; _, adocument.write('</div>')
( r& t) W9 j8 k+ [" B" \: e8 H1 Ofunction JSFX_FloatTopDiv() 2 l/ ]3 B! A2 u' b- T
{
/ V8 p, C9 \$ }5 @5 F6 F4 Z% B0 E下面的var startX =3是水平位置,250是垂直位置;默认情况在屏幕左侧显示,若要改为右侧显示,修改3的值(var startX =3改为var startX =screen.width-150)即可。
0 k5 p6 [8 t. a: j# D var startX =3, 4 Y9 s+ l" u1 C
startY = 250; ! U* H1 @0 l7 ]
var ns = (navigator.appName.indexOf("Netscape") != -1); 1 c+ \. y3 n& Q+ @( b) m; b5 E9 D- h
var d = document;
) {3 L, U1 t- }, k. i# G2 u function ml(id)
- B/ ?+ J% Y& N; Q0 C$ P {
! x# @6 {8 g4 n p, k var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id]; 3 j+ y" h: |5 k* Q; B9 I: s; ~
if(d.layers)el.style=el;
' x- N. w* R- j. g O el.sP=function(x,y){this.style.left=x;this.style.top=y;}; ) L/ ~& g( J) e' ]( ~; I
el.x = startX; + D6 M# ^! q! p9 O' [/ v
if (verticalpos=="fromtop")
. @- q0 V5 W+ o0 E1 z el.y = startY; ( L# }3 K# {/ z: ]2 V5 I1 H
else{
5 F6 e' J2 p$ T* U& Y el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
7 U9 G! a( w8 ] el.y -= startY;
( e2 R- N% L4 j( ~5 ] }
9 j% v6 F" |( [% z0 ^ return el; 8 ]: K5 A Z9 _. @, R
} * q& @: A/ f& i! {& X7 M& Q2 m1 C
window.stayTopLeft=function()
( ^7 J1 u5 `* B9 I4 i1 s3 G% v* Z3 G { % Q' Y$ e: i& ~( _
if (verticalpos=="fromtop"){ : S' ]- b h0 S8 b
var pY = ns ? pageYOffset : document.body.scrollTop;
: ]) V# G0 c' _+ P6 t7 m( ] ftlObj.y += (pY + startY - ftlObj.y)/8; , O; O1 H5 P! z& W
}
( t3 U" K/ V% Z1 O else{
, {7 a8 h5 a- C/ e. V7 g var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight; ; S9 J' W1 d. _% `, z+ T
ftlObj.y += (pY - startY - ftlObj.y)/8;
Y$ x1 A/ v4 h: [1 V; r } 0 `7 X+ I" B+ F0 E' r6 }9 W
ftlObj.sP(ftlObj.x, ftlObj.y);
: X' a6 n8 q+ H* |& f) r8 D5 ~ setTimeout("stayTopLeft()", 10);
7 y2 n0 _4 b2 U# N: M2 T } - G: ^, i1 Q* k
ftlObj = ml("divStayTopLeft"); ! a: e \% K* Y5 o* W% }
stayTopLeft();
8 R0 ?4 n$ N& l/ g3 o3 F} ; y, T4 E& [) Z9 ]
JSFX_FloatTopDiv();
4 N7 r& Z) g5 g& f</script>
8 D; \. ^7 n7 l</html> $ k$ E2 m. B+ f! z* i5 ~0 r
第三步:下载相关素材(在图片上点右键-图片另存为…),保存到images目录下。 - t& i3 b& {! q1 r. G) N( Q
http://imis.qq.com/images/wpa/images/kefu_up.gif % ?4 y! o3 d. W2 f4 d/ i% n% e
http://imis.qq.com/images/wpa/images/ kefu_middle.gif
9 R: n1 @$ J% ~ [% U) Y7 thttp://imis.qq.com/images/wpa/images/ kefu_down.gif # K1 B3 E& G4 _# p4 y ~9 v
http://imis.qq.com/images/wpa/images/ QQonline.gif
4 R2 W/ n! [$ r! Khttp://imis.qq.com/images/wpa/images/ QQoffline.gif
$ M" s2 b/ _9 f3 r% q, hhttp://imis.qq.com/css/im.css T8 b3 y5 c3 V" K5 O% J2 ?9 M
第四步:将所有文件和目录保持原有结构(kefu.htm和文件夹images),拷贝到您的网站目录中,在你要添加“浮动QQ在线客服”的页面的最后面添加一行:<!--#include file="kefu.htm"--> |