浮动QQ在线客服&网站QQ在线咨询 5 F4 D% s9 h& D- P
第一步:先把以下代码保存为kefu.htm
# @$ U. }+ o% c$ e0 Z第二步:按橙色说明修改 ! i3 D* k7 [+ ^6 s$ D# ^5 E1 g
绿色部分是要修改的内容,html文档中不包括说明文字:
, D4 b; G4 a/ D& b<html>
R* o* l6 z c- Q) L! {<head>
7 f# R/ F, [) j# I B2 M( t, d! V<meta http-equiv="Content-Type" c>
8 a; d* i6 ~8 R' Z4 O<link rel="stylesheet" href="images/ im.css" type="text/css"> - @3 |$ q6 s9 d3 O: w3 p r
</head> 0 Y" Q( U8 @- ^$ C( u" H& o' u4 J; \
<script> ! M9 y# G% V e& H
var online= new Array(); 3 |. \0 h2 ]% K, n
if (!document.layers) / K0 z3 |6 g& S0 F$ `2 \( F
document.write('<div id="divStayTopLeft" style="position:absolute">') 6 P# ?9 d4 X/ ?% j. o9 ^3 k
</script> 7 G' u$ ~3 f9 F0 R/ I$ h# S
<layer id="divStayTopLeft"> `7 A4 ]: w, r8 R* F# X
<table border="0" width="110" cellspacing="0" cellpadding="0"> 6 t- Z4 x% D. _ v
<tr><td width="110"><img border=0 src=images/kefu_up.gif></td></tr> % ^. \; F! b% k- m' c$ i1 Z
<script src="http://webpresence.qq.com/getonline?Type=1&27089965:27043921:56129874:"></script> ; j+ l- c# Z! B* S
将绿色部分修改成你的所有客服QQ,多个QQ用半角冒号隔开,最后一个QQ号后面也必须以半角冒号结束 3 ^+ f( H. \. s. r# F
: f7 H; W3 M$ B; f; e& G# z
以下部分显示第1个客服QQ,注意:online[0]
" x: f9 X' T7 d% L- O6 A: m<tr><td valign=middle background=images/kefu_middle.gif>
! k k1 V+ }* y& d<script>
! i8 q1 j" [- X" l6 lif (online[0]==0) 6 o$ i1 |6 S! h8 B4 P( n3 l O/ {9 u
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>"); 0 {7 C1 o* j) U( F% A7 m# e" z, v
else
: m! [9 ]0 v* m0 u. U+ Ldocument.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>");
( F6 L4 C G, w: \+ {; o% e e</script >
& P7 k& t y1 W0 d</td></tr>
" d2 C0 y7 e0 Y! _3 O9 i
8 `0 W8 J2 o @4 J0 L* F以下部分显示第2个客服QQ,注意:online[1]
+ I0 O, D9 H1 N r9 o+ J7 f<tr><td valign=middle background=images/kefu_middle.gif> ( V0 Q1 B" s: L
<script>
% y5 B% m8 E* o/ X( f! v) r |if (online[1]==0)
$ j# E, x# K: K. g# n. h, |0 h: ?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>");
. ^% }$ {8 \' v) h# Q# Q0 x7 T, [else
: z8 F: g; S! C) U# b, Ldocument.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>"); % s& \6 N. J, W" O6 R5 a4 c# [( m% {3 s
</script > ) G0 M5 b4 V! K: \4 ~9 k) o
</td></tr> + K9 @3 X+ H! y$ a1 _ C' W; w
! i! p6 n* {5 G% t; }7 x以下部分显示第3个客服QQ,注意:online[2]。
: l# d3 ` ^" |# t0 r4 o6 I<tr><td valign=middle background=images/kefu_middle.gif>
- j! ?1 q. A7 [: a- \+ C' e<script>
+ ~$ l' y; ]) x9 g" f+ Wif (online[2]==0) 5 G+ b7 y% t! [ W6 I0 v
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 j5 G7 E, o, \8 d4 g* W0 i) {( Lelse
+ c( A" O. F E* e/ Mdocument.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>");
6 N6 V) a: ^4 I</script > ) H# X5 w# b! O
</td></tr> + e/ ^$ [+ w1 X) `" h) m( {1 e8 i
% J3 ^; L( o1 _) e4 ^多个QQ,按以上规律复制上面的代码后修改online[0] 中的数字(第1个QQ为online[0]、第2个QQ为online[1]、第3个为online[2],以此类推)和QQ号(每组代码中有2处位置改为QQ号、2处位置改为昵称)。
3 `+ c$ ]+ K3 v) V" g 6 ^/ _% K# o. ?# c; }# `
<tr><td width="110"><img border=0 src=images/kefu_down.gif></td></tr>
4 x$ ~5 p- t- ^& q</table> . O' M2 U# \! z$ L
</layer> 5 y. |1 z$ |! a- a" }3 t% Y
<script type="text/javascript"> * }' ? _5 A1 y9 A% T B# f; |1 L
//Enter "frombottom" or "fromtop" ' R7 |/ s, \: o+ [7 A( {$ o. H
var verticalpos="frombottom"
, g, _1 c/ J h: V/ n. sif (!document.layers)
% C+ y$ _) w$ f; adocument.write('</div>')
6 c! Y) z3 P0 M3 ]5 T8 V J( U" u0 tfunction JSFX_FloatTopDiv()
+ P% e# \9 k8 [$ Q{
U% F; F8 ?# ?8 N下面的var startX =3是水平位置,250是垂直位置;默认情况在屏幕左侧显示,若要改为右侧显示,修改3的值(var startX =3改为var startX =screen.width-150)即可。 1 m# l) J0 L. F6 ]* Q
var startX =3,
' S9 b _" U8 G( _! @0 K startY = 250;
0 I! N% v0 y8 k+ ?; |; n var ns = (navigator.appName.indexOf("Netscape") != -1);
: W" s2 H& `7 b2 I' K! D var d = document; 5 b5 r3 |5 o9 `
function ml(id)
1 O: L9 Y9 |% v; d4 v# I {
6 r4 n' l& M9 o var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id]; $ S8 s& |7 J0 B2 n
if(d.layers)el.style=el;
+ d+ H3 V5 M6 H, [ el.sP=function(x,y){this.style.left=x;this.style.top=y;}; : o' T, _7 r( `' z% ~
el.x = startX;
0 F& S/ C* t+ o. t, | if (verticalpos=="fromtop") $ @& q4 @7 h1 c% f
el.y = startY; # c+ @0 c ]- c9 |' G
else{ * q2 n3 l& t) f4 v% s; a
el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight; & h$ d2 z) R4 T8 x9 I
el.y -= startY;
3 Q! q# n+ q' m6 Y5 c } & P* f3 s6 w) S1 w% z" j0 k4 }
return el;
y' s0 E8 M; s* i6 b2 q6 F) j } / R" ]' r+ U" Z% E0 u" W6 }
window.stayTopLeft=function()
, }1 Z2 i2 R8 u$ S. p* k9 V$ s: s {
# p9 O" |# B( ?/ r5 w% R if (verticalpos=="fromtop"){
, B2 J, |: O% H% u" i var pY = ns ? pageYOffset : document.body.scrollTop;
# q r8 K: Z x( O9 N2 J ftlObj.y += (pY + startY - ftlObj.y)/8;
# ^' g+ q0 Y5 c, W. R& W }
" s! L9 v$ R3 d2 W else{ 6 Y) E1 [+ G' Y3 A' Q& o# @8 m
var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight; & u9 q1 V2 z( c& ? v) D0 c4 t
ftlObj.y += (pY - startY - ftlObj.y)/8;
: ?3 `9 r; x2 g# @& _0 A5 o0 D } ! c r$ y- Z0 x- m* |) o
ftlObj.sP(ftlObj.x, ftlObj.y);
) _1 c. P& T6 U) b5 X* ^- {' t setTimeout("stayTopLeft()", 10);
. e* x4 ?9 _- Y) L& x }
* J2 e* Q, {, B; \ ftlObj = ml("divStayTopLeft"); ) [" [4 ?. f. {7 G4 p7 q
stayTopLeft(); 0 G' V/ N+ Z) C% ~& I5 J
} 5 D+ b* e* ]& m$ x, R: L0 F& R
JSFX_FloatTopDiv(); : U/ g6 Y: t, a5 Q3 a. ^3 `
</script>
0 J5 ^$ o h1 S+ S, ^- b V! V. @</html>
+ E) |5 f$ q$ y/ |第三步:下载相关素材(在图片上点右键-图片另存为…),保存到images目录下。 : M" i! u3 g" g( ]/ f1 q9 ]$ f1 d
http://imis.qq.com/images/wpa/images/kefu_up.gif 8 q# j9 j0 F; f& J
http://imis.qq.com/images/wpa/images/ kefu_middle.gif
1 Z i, i0 h3 N% Yhttp://imis.qq.com/images/wpa/images/ kefu_down.gif
$ Z! Z" k8 p% U Bhttp://imis.qq.com/images/wpa/images/ QQonline.gif
; x- }" W" R/ {% t9 Mhttp://imis.qq.com/images/wpa/images/ QQoffline.gif
+ {+ p9 n$ q9 G8 Rhttp://imis.qq.com/css/im.css
0 I6 L7 o' @$ }! v第四步:将所有文件和目录保持原有结构(kefu.htm和文件夹images),拷贝到您的网站目录中,在你要添加“浮动QQ在线客服”的页面的最后面添加一行:<!--#include file="kefu.htm"--> |