|
浮动QQ在线客服&网站QQ在线咨询
& T% D) x$ N# `5 D5 r+ M7 ^4 [第一步:先把以下代码保存为kefu.htm * a3 Y( C0 B( ]+ X! |
第二步:按橙色说明修改 N2 e1 q. x6 C& {+ Y
绿色部分是要修改的内容,html文档中不包括说明文字:
0 ^ ^! F$ M+ d" m1 M<html>
% y' z2 V+ N) I( Y8 q<head> 8 H: P) Y' A7 V# Y& ?0 V
<meta http-equiv="Content-Type" c>
/ |' k' P5 g5 @5 M5 k3 W* I c<link rel="stylesheet" href="images/ im.css" type="text/css">
2 i9 ^$ _8 s4 w6 s</head>
; y- w2 e+ o4 a- U( v<script> # Z9 D: Q1 Y1 y: X+ s0 W+ G( e
var online= new Array();
4 M& Z/ y5 t/ |# t! A( e1 b6 V) } Dif (!document.layers) 0 Z5 N. V+ t s' Q) z. M+ U
document.write('<div id="divStayTopLeft" style="position:absolute">') 6 S& E& J- }. y+ @5 k( f
</script>
6 @. C5 [1 v( y3 R* V<layer id="divStayTopLeft"> 7 A2 ]& y+ O( m. J: I
<table border="0" width="110" cellspacing="0" cellpadding="0">
; ~1 Q! u9 `% v5 e4 q0 R<tr><td width="110"><img border=0 src=images/kefu_up.gif></td></tr>
& ^4 S8 k+ T8 b, ?<script src="http://webpresence.qq.com/getonline?Type=1&27089965:27043921:56129874:"></script>
, l5 w3 C3 I2 N' \& s+ C1 q& A8 O将绿色部分修改成你的所有客服QQ,多个QQ用半角冒号隔开,最后一个QQ号后面也必须以半角冒号结束 5 p% ]" F- ~ l. q7 ?: f0 D+ F3 `
; |$ N+ m: v" V$ |6 K' w% b6 @" o以下部分显示第1个客服QQ,注意:online[0] 4 u# N$ l- W# m1 _
<tr><td valign=middle background=images/kefu_middle.gif>
' t B9 V/ I4 O6 _6 R: a' W<script> 3 M8 y! P: X! ?8 D0 p7 h: `1 T
if (online[0]==0) ; H( {2 E, d8 g( r% @
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>");
& y- w) c* |- f5 j; U( r% ^else 3 ^0 b5 y& Y* R- A/ Z) W
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>"); 4 G0 Y6 k+ ~9 E1 a; `
</script >
: Y! A+ W' m2 V$ G- J6 e+ v4 t</td></tr> ; K" D: h3 d- P8 F( o" @% n
0 ?& ?% l& m9 V以下部分显示第2个客服QQ,注意:online[1] ' B# |) a# L& r; i/ ^, w
<tr><td valign=middle background=images/kefu_middle.gif> - D: R& @+ N0 j- A* g4 ?
<script>
& f$ b7 B% m9 S# E; Bif (online[1]==0)
" p- R7 t- u) w' j, \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>"); 7 |" k4 t/ ?: c* ], f' M y( m
else / ]9 S3 L/ x, ]
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=27043921&Site=在线咨询&Menu=no' title='在线即时交谈'>技术支持</a>"); 7 y0 ^7 N+ M' K
</script > $ T5 e7 L* ?$ O X1 r
</td></tr> " m' x" j- a$ p3 o" m4 ^$ h
( [- c; s& ]! V$ _4 g, V6 O
以下部分显示第3个客服QQ,注意:online[2]。
* M# q* t( \! V+ I4 ?9 e' m4 R<tr><td valign=middle background=images/kefu_middle.gif>
1 L" B8 R$ G% ]; `<script> 4 ?% q7 I- ^; K& B+ Q5 j( z0 W7 x7 q* ]
if (online[2]==0) 3 C' s# k/ v" X! @% c8 C# g! @
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>");
9 b7 i9 p+ J2 i" eelse
5 z7 K, {% N& M6 a# Zdocument.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 J; W% x7 y2 [- \# h! z4 p
</script >
& ^8 h: Y2 b6 e3 Y7 ]</td></tr>
% `* q* M" s' Y* l% d : Z/ T1 T8 M2 b" k
多个QQ,按以上规律复制上面的代码后修改online[0] 中的数字(第1个QQ为online[0]、第2个QQ为online[1]、第3个为online[2],以此类推)和QQ号(每组代码中有2处位置改为QQ号、2处位置改为昵称)。
, L5 m) z+ p' m. ] : y. O, I8 e# m4 p
<tr><td width="110"><img border=0 src=images/kefu_down.gif></td></tr>
- A ~+ F* M/ I& q. P</table> 4 r; o8 ~. x1 H1 v( @3 Z
</layer> ( U. I. ?+ F7 s1 O
<script type="text/javascript"> 4 K- B& K2 c6 i, T8 S+ B
//Enter "frombottom" or "fromtop"
5 N3 x5 t0 ^) v) Jvar verticalpos="frombottom" 3 b1 W+ A8 C9 v- d
if (!document.layers) 1 h Y1 W, W- m8 ]6 @1 d
document.write('</div>')
3 L& b- W/ _% o* D& ]function JSFX_FloatTopDiv()
- g1 B2 r' w- I9 F9 L. h$ |5 I) M{ . [4 \. F! U( T7 O1 B2 C) p, M7 v
下面的var startX =3是水平位置,250是垂直位置;默认情况在屏幕左侧显示,若要改为右侧显示,修改3的值(var startX =3改为var startX =screen.width-150)即可。 ! n* j, Y* `2 K& k& l) Y+ `
var startX =3, * N" t, Y$ V1 F# p" I) m/ s# C: m; Z
startY = 250; 8 Y8 ^5 i; }, ]( R/ x) p: Z
var ns = (navigator.appName.indexOf("Netscape") != -1);
+ ~! j# ?( a9 Q6 ~+ H5 w% g# x var d = document; 0 v' ^* Z0 l2 P! W, U
function ml(id)
1 v1 U4 [( N7 ?; c/ W {
2 E; c6 W8 p( f4 ^7 t' U var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id]; 7 U7 J7 n* a3 w9 E7 c$ _
if(d.layers)el.style=el;
' b$ g1 D& z8 [& l3 |% Z' l/ J el.sP=function(x,y){this.style.left=x;this.style.top=y;};
2 H- ]* \+ L- q. Z) ?% ` el.x = startX; + ~' w( | g% s$ ?3 p$ D" e' }
if (verticalpos=="fromtop")
. B# Y9 n7 c- B# a! i% \, _% X- _ el.y = startY;
" h# E3 m2 ]2 x. L8 H6 j8 W else{ * ?( O8 L) z" w2 P" k
el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
, H: N" s! c" v) ~ el.y -= startY; , b! A* p h, q+ d$ ?# @6 Z% x
} 7 |1 U5 u6 U% @/ j" x" O
return el; % ]: j6 ^- _2 Q+ W* ]
}
; I m9 R% z& C# k! D' Z window.stayTopLeft=function()
1 L O2 x% K t0 p3 i+ v4 r4 f, q {
- p- ]' x, l' ?1 ? I if (verticalpos=="fromtop"){
( e% @* o6 y: n9 K, i var pY = ns ? pageYOffset : document.body.scrollTop;
/ i5 z8 ~& P: U6 v7 H. a ftlObj.y += (pY + startY - ftlObj.y)/8; , T. N8 x4 h. t( t1 ] Z: r1 x
}
4 L: C" M, Z3 G# x5 [: P m8 L Z else{
3 {+ W/ S" t. c- z6 B4 A var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight; 6 V8 B! F- ^6 @- [
ftlObj.y += (pY - startY - ftlObj.y)/8;
K: \; p+ J: U3 n+ f } ! K2 h" s$ }2 h$ ^; n7 V. `
ftlObj.sP(ftlObj.x, ftlObj.y);
* k5 i1 }6 O: U% _ setTimeout("stayTopLeft()", 10); 9 P6 I- J3 k) S8 j
} . z* d- }! k1 X; _0 r
ftlObj = ml("divStayTopLeft");
* b) ]% x, f1 j! @( l stayTopLeft(); $ w! A, O o* g$ ^. h x8 y3 n
} 4 D2 h3 ^: R% C( f, S5 Z- c
JSFX_FloatTopDiv(); 8 n1 J. \) [5 [) V* ^, R/ h& o* \1 T0 ~
</script> ; p ~* l8 M* F1 n
</html>
& ?" ~( U+ l/ a0 f' W) ^第三步:下载相关素材(在图片上点右键-图片另存为…),保存到images目录下。
3 @6 K/ S' i& K& ?6 |http://imis.qq.com/images/wpa/images/kefu_up.gif
( k) `. u) f: r' i9 Q; zhttp://imis.qq.com/images/wpa/images/ kefu_middle.gif . G. w s* Z- N# H; G- a. A3 R8 F
http://imis.qq.com/images/wpa/images/ kefu_down.gif
$ O" _& D# p- y2 rhttp://imis.qq.com/images/wpa/images/ QQonline.gif
7 f. g" S6 |# @, z8 j% n! bhttp://imis.qq.com/images/wpa/images/ QQoffline.gif * {# s, a+ ~" |( N
http://imis.qq.com/css/im.css / _+ m6 i6 W& N0 m) w! U# ]
第四步:将所有文件和目录保持原有结构(kefu.htm和文件夹images),拷贝到您的网站目录中,在你要添加“浮动QQ在线客服”的页面的最后面添加一行:<!--#include file="kefu.htm"--> |