|
浮动QQ在线客服&网站QQ在线咨询 1 O- s2 q0 _% ]3 e
第一步:先把以下代码保存为kefu.htm 3 K# B. w( b1 H( Y
第二步:按橙色说明修改
. W I7 J1 c X% P4 p n* r绿色部分是要修改的内容,html文档中不包括说明文字:
7 m+ m2 |4 m x5 I j+ A<html> 2 O. D3 H# s- r
<head> d) v; F4 c. j6 F8 j
<meta http-equiv="Content-Type" c> $ ~# ?; L5 g2 N+ `& c) @5 @
<link rel="stylesheet" href="images/ im.css" type="text/css"> 3 s1 v7 H* x. r/ ^+ M; F) a+ P( C% j
</head> 6 w$ X7 b3 q. m$ z2 _" ~
<script> ' f6 ?7 P( R* p8 k
var online= new Array();
6 R, F& J/ Q1 _" x: z7 Uif (!document.layers)
# R! I# ~; n. F0 Sdocument.write('<div id="divStayTopLeft" style="position:absolute">')
; W5 g; z8 q% V L% f$ x. b% d</script> " M4 `7 n3 P/ c0 r- C
<layer id="divStayTopLeft">
; q, Y$ f: L# T5 E! Z5 S7 F8 @. J<table border="0" width="110" cellspacing="0" cellpadding="0"> - S" @6 R8 A2 I, I- x
<tr><td width="110"><img border=0 src=images/kefu_up.gif></td></tr>
4 c( j' f' w( H' X7 @% u/ v( R5 F<script src="http://webpresence.qq.com/getonline?Type=1&27089965:27043921:56129874:"></script> 6 N9 I* {: M, r/ y. F
将绿色部分修改成你的所有客服QQ,多个QQ用半角冒号隔开,最后一个QQ号后面也必须以半角冒号结束
+ o( J% t N6 t, q& N : c$ e; E# ^6 q+ I3 I
以下部分显示第1个客服QQ,注意:online[0]
A7 o; S4 p+ y' v& ~0 O<tr><td valign=middle background=images/kefu_middle.gif> 0 `& @4 A* y8 p- s% m+ [8 M5 Q
<script> ( s; V7 y+ T. G/ H! ~
if (online[0]==0) : s2 h; m5 h7 Q) ?
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>"); * x, Q4 y! H7 Y! H- _
else
! A' Z. H( G5 p/ u9 [. ~& Kdocument.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>");
+ A: C! t2 H; |5 e( h</script > A/ d; V: P2 h& d. V! M D
</td></tr> : ~# w$ x6 w( z- | J [
# m- ^9 C' l1 L, \以下部分显示第2个客服QQ,注意:online[1]
6 R b3 ] m! s; p2 o<tr><td valign=middle background=images/kefu_middle.gif>
l, U" e( { _3 f, {, r8 c: X" Y<script> $ b, J1 u: N3 f" w7 c
if (online[1]==0)
/ p6 j- L' p- l; p( y4 ]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>"); ) b. w; u9 _, n8 X$ h' M
else
1 L, _& F% `0 a% t; }& W! 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=27043921&Site=在线咨询&Menu=no' title='在线即时交谈'>技术支持</a>");
" ?5 k+ ?5 K% i! J. I/ T! i' d</script > 3 M0 Y6 |. _* v
</td></tr> ! z: I& f2 D+ A- M$ | T
: a' O3 Y/ c1 i" {( L6 N
以下部分显示第3个客服QQ,注意:online[2]。
w, t5 u: P2 A& f" v# A& T) l5 a<tr><td valign=middle background=images/kefu_middle.gif>
" `! B5 M+ A3 Z0 t6 J<script> X4 L# C7 H$ i0 I$ f
if (online[2]==0)
( s& U6 d" [/ \5 \$ c- 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>"); ; n7 \( h# B7 @1 U* v' j2 b
else
9 i* y6 L9 P4 c. o. 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>"); 0 O. @4 h* [# [7 D
</script > 1 L; T2 D9 R/ o3 j9 B
</td></tr> " q! p2 z' j4 h+ R6 a; Z( I3 e
6 b2 E+ @6 j: z1 m多个QQ,按以上规律复制上面的代码后修改online[0] 中的数字(第1个QQ为online[0]、第2个QQ为online[1]、第3个为online[2],以此类推)和QQ号(每组代码中有2处位置改为QQ号、2处位置改为昵称)。
, ^& z0 M5 H' V" h* E9 K m ' M- u4 B/ K8 W1 A& }9 b/ ^5 K
<tr><td width="110"><img border=0 src=images/kefu_down.gif></td></tr> , b1 T% r( e3 y; o# A" t
</table>
; r( \2 ~3 P7 I! E6 w</layer>
1 `9 @/ D; V- E4 s5 r# O<script type="text/javascript"> 7 B) ]) J, k H2 N- n/ y
//Enter "frombottom" or "fromtop"
$ c( ~; H) @ S' Avar verticalpos="frombottom"
9 z" Z! |' o, f: v- K3 mif (!document.layers)
0 ~4 k5 f% \) g& Odocument.write('</div>')
3 A0 O$ x) i# J! s7 Gfunction JSFX_FloatTopDiv()
8 W. m R& l. I$ i+ u9 E{ N/ F/ E( M9 s: r6 C
下面的var startX =3是水平位置,250是垂直位置;默认情况在屏幕左侧显示,若要改为右侧显示,修改3的值(var startX =3改为var startX =screen.width-150)即可。
, \; P0 u9 L g# C+ F" g var startX =3,
( A& J! {- s* l/ K! _- U/ g% ~5 t y startY = 250; : x3 Y+ t2 Y3 W7 @
var ns = (navigator.appName.indexOf("Netscape") != -1); . i! y: o) A( v0 ?7 E+ r
var d = document;
0 M( @1 ~" p0 i. s function ml(id) , E Y, \: d* N
{
& I V! x+ w$ y% _ var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
. |6 R* C6 ~8 Y' }* F if(d.layers)el.style=el;
4 S X$ u' E% ]; l0 i+ D' G el.sP=function(x,y){this.style.left=x;this.style.top=y;}; # F6 ?# V" O) l! J# A, X$ _5 F% B
el.x = startX;
t- z; `9 [$ _. K0 r l if (verticalpos=="fromtop")
$ W5 b" w& T1 y" R( v: f el.y = startY;
/ y) b$ [! F7 W+ V" F else{ # q' T* \4 q9 b g3 p- F
el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight; ; y0 _+ k& D- s4 h; b! i
el.y -= startY; , V1 b/ y/ k9 G. y5 Y5 G6 ]- x- c" M
}
, E6 |+ O! s+ [4 \, L return el;
8 u2 ? L/ g# `2 y }
! E# p$ T3 e4 h7 M# ] window.stayTopLeft=function()
+ G$ [6 C) x' ` J& Z1 S {
% k# l6 R) o1 y) q3 a3 m% | if (verticalpos=="fromtop"){ * Z3 A% n v' f5 x- a0 o, D
var pY = ns ? pageYOffset : document.body.scrollTop;
4 }1 w' v0 k# C ftlObj.y += (pY + startY - ftlObj.y)/8;
0 I: d9 b8 q7 }7 t% B' a. H } $ @6 ]& q; Y5 P/ T
else{
, b9 K) I( z2 N# f1 t `9 D- k" X var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight; " q0 `" g# s! N) S/ a
ftlObj.y += (pY - startY - ftlObj.y)/8;
2 `8 J0 s$ b. L: o2 z4 }4 O# Q } N* H- ? I! e
ftlObj.sP(ftlObj.x, ftlObj.y);
" h( p; i; }" C0 E, e7 ? setTimeout("stayTopLeft()", 10); 3 I J* d2 a" g# P/ d
}
( f. w& m" M) K% } ftlObj = ml("divStayTopLeft"); # n7 H8 e) P8 v
stayTopLeft(); 7 v9 g! F- l) z' a l( ^: |/ G
} ; Y& d0 a$ ?9 Q0 @* w" G3 z2 h: F
JSFX_FloatTopDiv(); 0 @/ S8 U1 s% M, Q" Q5 t) ?
</script> # Z; C: u% b' ~$ u2 ~
</html>
7 w2 M9 n0 l* V- R第三步:下载相关素材(在图片上点右键-图片另存为…),保存到images目录下。 8 X6 p6 [) W, B. ?' j
http://imis.qq.com/images/wpa/images/kefu_up.gif
+ H+ h# g4 l* B- M. q8 y7 z4 zhttp://imis.qq.com/images/wpa/images/ kefu_middle.gif
% l* d5 ^ } G" Z6 _9 `3 \http://imis.qq.com/images/wpa/images/ kefu_down.gif 3 ^) F% [9 _/ \' P" j
http://imis.qq.com/images/wpa/images/ QQonline.gif / ^ Z2 f$ `+ B! {5 r9 J& f. V8 x
http://imis.qq.com/images/wpa/images/ QQoffline.gif . c: k8 T$ t# q, z
http://imis.qq.com/css/im.css . [5 W) R$ z! x8 Q
第四步:将所有文件和目录保持原有结构(kefu.htm和文件夹images),拷贝到您的网站目录中,在你要添加“浮动QQ在线客服”的页面的最后面添加一行:<!--#include file="kefu.htm"--> |