|
浮动QQ在线客服&网站QQ在线咨询 % \: }9 l& l+ O
第一步:先把以下代码保存为kefu.htm
! G# {' `' e- G第二步:按橙色说明修改
0 I ^; v1 S! x1 o% C: i5 Y- X绿色部分是要修改的内容,html文档中不包括说明文字:
% Z8 } |3 j3 u: |. _! Z% G1 W<html>
. N7 e$ [0 y: c- X- p<head>
. \4 \ f* M w% e# e<meta http-equiv="Content-Type" c>
6 h. y# p* r+ w4 d+ U$ B. \: {<link rel="stylesheet" href="images/ im.css" type="text/css"> 3 x4 {( d1 k9 e5 P% v
</head> . y& Z; i) _/ V% [ a7 q3 k3 e0 U
<script>
y& J. U3 G6 B$ n& x ?0 }6 gvar online= new Array(); 6 P+ ~0 F9 {3 V( Z
if (!document.layers)
; F1 B4 M3 |; L7 cdocument.write('<div id="divStayTopLeft" style="position:absolute">')
$ y# ?: o Z: o; [* e</script> 0 G# ~; Q: l3 V K* \) e
<layer id="divStayTopLeft"> 7 F( S% A0 `6 x4 u% ?& D
<table border="0" width="110" cellspacing="0" cellpadding="0"> 6 I Q- z' \9 s4 u9 L
<tr><td width="110"><img border=0 src=images/kefu_up.gif></td></tr>
9 v" j7 j: n+ H+ u4 v<script src="http://webpresence.qq.com/getonline?Type=1&27089965:27043921:56129874:"></script> 1 D+ I5 Z# F) U% U
将绿色部分修改成你的所有客服QQ,多个QQ用半角冒号隔开,最后一个QQ号后面也必须以半角冒号结束
/ E% d! e7 u. {( S( @
1 Z& g* ?' ~/ V: U. ]3 W* X" E以下部分显示第1个客服QQ,注意:online[0] ; \4 p8 `1 z) v
<tr><td valign=middle background=images/kefu_middle.gif> 3 ?! G, S3 v2 g# `1 T l
<script> }" x$ Z) a' @+ n* g
if (online[0]==0) ! M6 a. L2 l( n5 F! ?
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>"); " d& `% P6 T0 Q) `# d
else ( w# ]9 A/ M+ |
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>"); 1 V. H' o8 c+ K1 q
</script > [2 H8 B) h H
</td></tr>
& A( R, v1 a" z V
, k9 R! x7 y; e. j( }以下部分显示第2个客服QQ,注意:online[1] 2 _3 M) `1 N5 f' u$ u8 W
<tr><td valign=middle background=images/kefu_middle.gif> 6 e6 M9 M' z- F0 \ f
<script>
8 Q9 ~9 k) E4 ]. c: E' z3 fif (online[1]==0)
) R2 |+ f0 I4 _3 odocument.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>");
* S* @6 ^: n0 A* @5 pelse
6 `8 Z2 f& R* L: l6 Ddocument.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>"); + Z0 B- l' `' ]: X. R+ O5 X0 s. |
</script > ' M; R7 w: h1 e5 t4 R- B
</td></tr>
- p+ ?# V' Z) g( V' C8 _ : k% M8 a6 ~0 T4 a8 X. i l7 o
以下部分显示第3个客服QQ,注意:online[2]。
9 J+ Z/ ^: }' N+ u1 \8 M6 ^<tr><td valign=middle background=images/kefu_middle.gif>
. `1 F! z3 u/ R8 W( X% Y3 N<script> % J G* j! |4 L9 s
if (online[2]==0)
2 u% _* X" b/ q/ Gdocument.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>");
; m! c# T# S0 Z0 Welse
) \) R4 C2 p& E: t( V/ @; Y% u {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>"); 5 Z* r4 D" ~1 q; n
</script > * H" |: @( ]0 p% \
</td></tr>
6 ^" \& `. J9 g. k4 s! Y; n; [. I
$ _4 t, k' H# s& o* C8 r' _% T多个QQ,按以上规律复制上面的代码后修改online[0] 中的数字(第1个QQ为online[0]、第2个QQ为online[1]、第3个为online[2],以此类推)和QQ号(每组代码中有2处位置改为QQ号、2处位置改为昵称)。 & c. \+ @+ v7 t4 L1 |% k3 R
. H. W* \8 ], k- J<tr><td width="110"><img border=0 src=images/kefu_down.gif></td></tr> & I; Z8 p& J% I% u; R# x
</table>
; L; l, G+ s- C</layer> 9 v! D! H2 P+ `5 {6 u+ s
<script type="text/javascript">
! p* }- x' u; Z8 h# l//Enter "frombottom" or "fromtop"
3 g2 K. a' Y/ n4 dvar verticalpos="frombottom" 7 N$ L' v5 r- x" B7 @
if (!document.layers) 8 L2 u1 x9 u+ o$ e
document.write('</div>')
% G% s2 t9 N! G0 Pfunction JSFX_FloatTopDiv()
: K+ h% e0 w ]# H% H! j9 ~{ g7 J! R' G. _. T
下面的var startX =3是水平位置,250是垂直位置;默认情况在屏幕左侧显示,若要改为右侧显示,修改3的值(var startX =3改为var startX =screen.width-150)即可。 : R' ~) Q! P5 f! _! p
var startX =3, ( \' ]3 k# J" f" e0 W6 {. c& c4 x# j
startY = 250;
% ~. V9 M7 j4 o+ U3 E var ns = (navigator.appName.indexOf("Netscape") != -1); ) L% q6 {3 R$ v" @
var d = document;
: P/ f$ [/ v. `/ O function ml(id) - P2 _# Z9 J i" C/ z U
{ 7 ] S; c; k4 Q' S+ O
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
; P) c* x3 D3 V* x; q/ V) _* _ if(d.layers)el.style=el;
1 B9 ]: o. p7 R: h0 i) W el.sP=function(x,y){this.style.left=x;this.style.top=y;};
5 v5 F( ~- s0 g; ?; l1 p' H. @ el.x = startX; $ t8 b7 N2 m4 i; u2 N
if (verticalpos=="fromtop") 7 S4 G( A% r) G# b6 _
el.y = startY; 2 P8 R% m1 `# r
else{ 6 K w. D" }$ ^% Z& S6 B3 g2 q" @
el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
% K) [& t* E* @ el.y -= startY;
8 o4 L4 \) I; T' \ } 5 e/ o, K0 i: Y3 y7 _& U- a l2 h
return el; + k6 i9 ]% T$ r# u2 x
} _! T: z( s! P1 Y
window.stayTopLeft=function()
1 [6 ^% N1 @; W/ H/ r' V9 } { 6 u3 h9 F$ G; a: s! C. n
if (verticalpos=="fromtop"){
, \1 Q( G! |/ z: b) P9 s var pY = ns ? pageYOffset : document.body.scrollTop; ) `% A7 e( a3 h$ u2 C" f- }* L
ftlObj.y += (pY + startY - ftlObj.y)/8;
3 O8 X$ u& r3 f" c' R# P, | } 6 {5 H) g7 W1 k& t$ z! s5 Q
else{
5 W8 T; J' ]/ X+ F var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
6 {1 s( w1 N2 x ftlObj.y += (pY - startY - ftlObj.y)/8; 3 v3 m% W$ j9 V; {) m+ b% p
}
: u1 p% l4 N7 H4 X( a ftlObj.sP(ftlObj.x, ftlObj.y);
2 ]$ R" h0 G/ H) x+ ~& ~! L* W setTimeout("stayTopLeft()", 10); O3 V7 r I9 }- f# c q u
} 9 c- D" j7 g9 L {+ [$ E
ftlObj = ml("divStayTopLeft"); 9 a$ B. T/ i- a
stayTopLeft();
) j {, ]2 s$ e j2 b$ `} ) X/ p _+ G/ _ ?* b
JSFX_FloatTopDiv(); % t y" L3 k7 L/ d. e/ c3 y3 k7 N
</script>
% t: t8 ]: v8 @4 Y4 P</html> g# m8 c$ M1 c6 H
第三步:下载相关素材(在图片上点右键-图片另存为…),保存到images目录下。 ) M' e, I% m8 j5 Z7 C
http://imis.qq.com/images/wpa/images/kefu_up.gif
1 P. ] | x( n4 Q& \* Ahttp://imis.qq.com/images/wpa/images/ kefu_middle.gif ! b, E; e' B/ X! p& B$ {
http://imis.qq.com/images/wpa/images/ kefu_down.gif
# G' c& s; x5 V0 \http://imis.qq.com/images/wpa/images/ QQonline.gif
' R8 t& ?! ?" ]3 `+ U5 q7 U4 phttp://imis.qq.com/images/wpa/images/ QQoffline.gif
7 C) A- Y, f3 t& n- K- y) fhttp://imis.qq.com/css/im.css ; Z2 W2 m* j0 Y
第四步:将所有文件和目录保持原有结构(kefu.htm和文件夹images),拷贝到您的网站目录中,在你要添加“浮动QQ在线客服”的页面的最后面添加一行:<!--#include file="kefu.htm"--> |