|
浮动QQ在线客服&网站QQ在线咨询
' D$ \- i; P! `4 u第一步:先把以下代码保存为kefu.htm
/ k& K4 \: N! N7 B; I第二步:按橙色说明修改
: o# ^' d! D' c; i6 s- q. I绿色部分是要修改的内容,html文档中不包括说明文字: % l" y: G I3 w5 N! D6 j# ^8 f
<html>
3 R( ]: q, s' H& n) Y" X<head> / c' v% r0 k+ C0 o5 C( M
<meta http-equiv="Content-Type" c> " p3 H3 a2 T( [ Z
<link rel="stylesheet" href="images/ im.css" type="text/css">
G$ m1 M% x% @3 f4 U# j* u</head> & h. F) s& U; A& x- x
<script>
% N( G# V9 [7 C, m# K4 Lvar online= new Array(); 3 \' T( C+ {- O [
if (!document.layers) , D8 ^/ e5 ?% z+ A
document.write('<div id="divStayTopLeft" style="position:absolute">') & A0 C" ^/ B: C3 Y. I
</script> : x" n. W. _: H' x. H2 a' i
<layer id="divStayTopLeft"> ( f8 }; S" a/ V ?! O& E
<table border="0" width="110" cellspacing="0" cellpadding="0">
! C# ?3 p; z2 z<tr><td width="110"><img border=0 src=images/kefu_up.gif></td></tr>
, p' \+ K" T5 X8 @( M0 Z* E<script src="http://webpresence.qq.com/getonline?Type=1&27089965:27043921:56129874:"></script>
8 R: N" D) f- T+ O2 A4 g将绿色部分修改成你的所有客服QQ,多个QQ用半角冒号隔开,最后一个QQ号后面也必须以半角冒号结束 " U# u/ P( J, B+ @; b
) k3 A9 c( |3 s6 g& v/ P/ b
以下部分显示第1个客服QQ,注意:online[0] ; B7 [! F1 l' E: ?# `+ q
<tr><td valign=middle background=images/kefu_middle.gif>
- N/ L: j) _. F6 R<script> 0 i4 e9 c3 v. Z# } j% B5 B; |# r
if (online[0]==0)
1 \$ |8 J" J: q) Ydocument.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>");
/ i5 @. ]& X7 W8 lelse / X* C0 Y, P! I I
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>"); 9 o% f) b' N- h2 m- K/ Q2 n8 Q9 N
</script >
8 H% O2 F/ E! u1 f1 l</td></tr> 8 l6 x5 T" P6 ^ ?& m' A. K# j/ ^
- k$ G. |2 [, d; D6 y6 x
以下部分显示第2个客服QQ,注意:online[1] ! c1 H% c' `1 ? |
<tr><td valign=middle background=images/kefu_middle.gif> , {1 W- c# f8 d, M; v
<script>
E$ n+ u+ Y' Q+ y/ ?if (online[1]==0) " i2 g* p+ z6 _6 K- e4 }! g3 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=27043921&Site=在线咨询&Menu=no' title='客服不在线,请留言'>技术支持</a>"); % b+ i: k4 J5 Q/ r Y* N" p! }
else
& F, K, a/ N9 H4 C# Pdocument.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>"); % d1 }7 \, P2 w: P7 G2 P! K u
</script > ( ^0 r! r" b% o
</td></tr> " Y% q$ V3 H+ e& `% s8 a
9 N! I1 A6 B5 [9 [9 O/ x以下部分显示第3个客服QQ,注意:online[2]。 8 W+ c+ J( ?- l) \
<tr><td valign=middle background=images/kefu_middle.gif>
' q: ^. |; }- S+ n/ s2 Z; s6 c<script> 9 h a- D, L0 K( M$ {: n! S
if (online[2]==0)
: t3 P+ }3 d$ B' @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>");
8 S" U* r* p3 ~+ ^4 j# [else
+ c4 x( f" v$ edocument.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>");
; Q5 l0 H! a$ D2 n</script > , B4 U) V5 L, P
</td></tr> h' b' E. P+ C3 E* b1 g
# s3 e1 ~2 i5 v
多个QQ,按以上规律复制上面的代码后修改online[0] 中的数字(第1个QQ为online[0]、第2个QQ为online[1]、第3个为online[2],以此类推)和QQ号(每组代码中有2处位置改为QQ号、2处位置改为昵称)。 $ Q# {, C, O+ Z- B. w9 a
8 V5 E6 c7 E) m! B5 W& ^' z) Q$ i. ]' x
<tr><td width="110"><img border=0 src=images/kefu_down.gif></td></tr>
. R9 x; @" p( [+ u$ m( q! l1 }</table> : P7 |1 _3 P" X* C# o
</layer>
+ n3 P9 z1 v) }% k, t( x+ n6 U<script type="text/javascript">
( P2 W- ~7 ^) d3 `4 B//Enter "frombottom" or "fromtop"
% u m- [+ ]' g- P7 ? hvar verticalpos="frombottom"
# b9 `$ q9 g6 K; S$ }7 ^. e) W& yif (!document.layers) 2 ~7 H D* @! T' V4 x N
document.write('</div>')
0 c$ y6 A/ T/ q( mfunction JSFX_FloatTopDiv()
5 H" G) r) R, q+ x! ~{ 4 @+ m3 |% k; C* a! G5 o
下面的var startX =3是水平位置,250是垂直位置;默认情况在屏幕左侧显示,若要改为右侧显示,修改3的值(var startX =3改为var startX =screen.width-150)即可。 * e0 Q) @9 w, p$ v9 {9 y& ^
var startX =3,
4 O7 d) ~( |/ j t* Z/ w startY = 250; # W ?, K4 H! B7 s: E
var ns = (navigator.appName.indexOf("Netscape") != -1);
9 s' E, f. J, f var d = document;
& L2 v" C& Z& w: }7 R2 O4 B function ml(id) / d& A; ]0 O0 U C6 O4 y1 e5 l
{ j% p+ _( B. i
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
0 _* V8 X* M1 { if(d.layers)el.style=el; - _" z7 e! \; ?0 B$ f
el.sP=function(x,y){this.style.left=x;this.style.top=y;}; + N6 P1 N5 g' L* e8 F6 |0 y
el.x = startX;
% O1 Z" M) `! r" J- b! H! M* I0 U if (verticalpos=="fromtop")
& T) Y5 t+ b" X7 Q; g; { el.y = startY;
# c& X7 p5 j. H else{ 7 W. f; g3 v& t- t
el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
- k8 r; c' u! Q6 x K% }9 n; y4 r; L el.y -= startY;
: |" C$ Q+ F% @. |7 [ }
- W. V8 H. S& }) A% z% d% b4 I- F return el;
# ]; j( _( V1 U }
; W n0 `+ O$ [, s window.stayTopLeft=function() 7 A7 [$ O, d" t$ b# q) C) `
{
$ K9 ]5 g* T% d4 O5 j8 \ if (verticalpos=="fromtop"){
* f4 w6 r) z8 x# ~& }; _5 i var pY = ns ? pageYOffset : document.body.scrollTop;
F: ?8 Y [4 X) I, `* j" a ftlObj.y += (pY + startY - ftlObj.y)/8;
) D2 J! Z4 M6 |% S2 C } : ]9 ?. C }6 z* F, c7 s+ Q u
else{ ( r/ _. _* ]) ^9 _7 l) d% n4 m v
var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight; & Z# q4 n8 | i- q4 v, O$ Q
ftlObj.y += (pY - startY - ftlObj.y)/8;
`9 [! W3 u5 e `, |) P }
0 g t4 C! ?7 U ftlObj.sP(ftlObj.x, ftlObj.y); 1 e! Z7 s# r! Z/ U* r1 F3 j" R
setTimeout("stayTopLeft()", 10);
. p3 I/ k3 k) v } - S- W- j& N- d v
ftlObj = ml("divStayTopLeft"); , w! f3 o( M1 ~' p+ t2 u+ f( z
stayTopLeft(); ! _3 l0 k- m9 {5 w8 \2 M
} , S( m* Z; M3 ^& H7 l, H- r6 o
JSFX_FloatTopDiv();
* i+ f! W$ F. X" N8 X6 x</script>
3 a& C6 r3 w: w" h2 w4 ?</html> ) j* \2 p4 B3 a! B) L% Q
第三步:下载相关素材(在图片上点右键-图片另存为…),保存到images目录下。 . m X* O5 [; F# f: P* n$ x
http://imis.qq.com/images/wpa/images/kefu_up.gif % W/ b" k" E: k
http://imis.qq.com/images/wpa/images/ kefu_middle.gif
9 Y1 z6 A2 q8 _& r; \+ mhttp://imis.qq.com/images/wpa/images/ kefu_down.gif
# O; \5 U' B7 L6 Vhttp://imis.qq.com/images/wpa/images/ QQonline.gif
Z: S- P* U4 h- ?! Y/ y) Phttp://imis.qq.com/images/wpa/images/ QQoffline.gif
$ O: }6 Z9 Z$ R* y5 v& r# Y" }& thttp://imis.qq.com/css/im.css 4 u4 V, q+ o5 }5 b. b
第四步:将所有文件和目录保持原有结构(kefu.htm和文件夹images),拷贝到您的网站目录中,在你要添加“浮动QQ在线客服”的页面的最后面添加一行:<!--#include file="kefu.htm"--> |