|
浮动QQ在线客服&网站QQ在线咨询
. d5 V# ]; Q& `3 R3 p" K第一步:先把以下代码保存为kefu.htm
$ \* D% P+ R& R& ^9 {* l第二步:按橙色说明修改 $ V3 B# k) |2 s4 O7 R( P
绿色部分是要修改的内容,html文档中不包括说明文字:
0 [1 J0 |3 o- `2 v: A, g0 F<html>
3 ~- B M2 U7 A, A<head> / F/ j# x: n. S; c L
<meta http-equiv="Content-Type" c> * o$ y5 s. A& }# V
<link rel="stylesheet" href="images/ im.css" type="text/css">
$ r- [' p$ d1 l- R. e</head> 5 ]* M# `7 J( D, M& n
<script> 9 c8 _- D$ w; } w# b0 t0 `5 N
var online= new Array();
" x8 q) V1 Y- S8 |if (!document.layers)
3 C7 q6 l* e9 y N' k/ Cdocument.write('<div id="divStayTopLeft" style="position:absolute">') 8 W- C: R$ H6 P4 z- D2 Z/ Y7 M- B
</script> 1 q5 S0 @9 c8 Y2 _# r5 m+ |- H
<layer id="divStayTopLeft">
; I: t/ V* z2 v<table border="0" width="110" cellspacing="0" cellpadding="0"> 4 n6 V0 B3 d" B6 p* ^3 [" A
<tr><td width="110"><img border=0 src=images/kefu_up.gif></td></tr> 1 S& D/ F2 Y* f+ {) K! m: Y+ P
<script src="http://webpresence.qq.com/getonline?Type=1&27089965:27043921:56129874:"></script> ( x9 p: z2 L3 S) I" P4 C, S3 p
将绿色部分修改成你的所有客服QQ,多个QQ用半角冒号隔开,最后一个QQ号后面也必须以半角冒号结束
; T! }( Q. p- [9 D5 E8 D2 b4 g
" q5 d1 C5 O/ ~( V6 T1 p以下部分显示第1个客服QQ,注意:online[0] : z! M" E2 a! u0 O% o# N) p, C" `0 s
<tr><td valign=middle background=images/kefu_middle.gif> 2 F' e* ]) X8 g `( k0 W: h Z9 e) v
<script>
. Q4 g. D" F) x$ S2 Nif (online[0]==0) h/ C6 |% z& Y8 D8 I, M
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>"); % `- h# ?0 o! @! b Y
else
, o& U3 F- O. J1 |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>");
& L* A0 e: T. V# n( B</script >
" m# b+ j' O+ V+ l O6 f</td></tr>
& P; D( ~) F; n. j8 l. M4 T * ?# ^8 _% u; \) v
以下部分显示第2个客服QQ,注意:online[1] : S1 X- y* ^+ x& u) |# n
<tr><td valign=middle background=images/kefu_middle.gif>
% b: i3 K+ K4 Z1 w: f' n<script>
. l6 g. P, e& W e6 mif (online[1]==0) % U: x9 |$ e3 y+ c7 J; O
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>");
4 `% J$ j& D; K/ L: nelse ( i# l; v/ m8 c1 a- o
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>");
2 K3 q5 _: P# b. G% \% k5 n</script >
1 r4 A: i; T( X3 }2 L4 \& {) D* Y</td></tr>
5 p' ?8 N+ @9 A/ @$ s/ E
3 i9 `1 O* J: f! E8 k3 r, W以下部分显示第3个客服QQ,注意:online[2]。 3 K! L' i4 z1 `0 V3 c/ H0 g- l* |
<tr><td valign=middle background=images/kefu_middle.gif>
# q+ u" B7 v) [% N7 y) s<script> 4 i& K/ l' a1 f
if (online[2]==0) , P3 T& `6 ?; R2 B" p
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>");
# w# T, M3 U, U' u# R0 `7 gelse , F6 e5 Y% d% b1 B: \, U! N5 Q
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>");
% K- o$ Y1 R5 q+ A3 O* E</script >
6 x3 x5 @$ i4 b) R( G</td></tr>
( m% R' ]! c4 H& X5 }% K$ n4 K! o4 c , Q# D+ R8 f+ s7 O! J
多个QQ,按以上规律复制上面的代码后修改online[0] 中的数字(第1个QQ为online[0]、第2个QQ为online[1]、第3个为online[2],以此类推)和QQ号(每组代码中有2处位置改为QQ号、2处位置改为昵称)。 * r$ N. z! F% j* t8 U) i
O; B2 j) C8 U2 |8 l* a# i<tr><td width="110"><img border=0 src=images/kefu_down.gif></td></tr> ; \6 ^6 S V0 V! v& b: \7 Z
</table> 0 I9 m1 y2 U J3 r
</layer> `& @( d, ^# H" e0 D0 `1 i" I- a
<script type="text/javascript"> 1 k- }5 H+ t% P$ A/ C1 s
//Enter "frombottom" or "fromtop"
8 L+ w8 ?8 h7 `2 `4 a# Pvar verticalpos="frombottom" * x% K$ n3 \. L/ K% @# t
if (!document.layers) ; Y+ U6 p; {: i* v/ V
document.write('</div>') $ T! ?& q0 H2 q+ P6 }# X
function JSFX_FloatTopDiv() & B# W5 @9 l/ w0 v6 b9 S
{ * y+ `) B' s. l( i4 c8 x( p& u
下面的var startX =3是水平位置,250是垂直位置;默认情况在屏幕左侧显示,若要改为右侧显示,修改3的值(var startX =3改为var startX =screen.width-150)即可。
/ O$ m0 F! a Q/ z2 t9 W) w var startX =3, - t: J6 \ P) Y, }, f
startY = 250; 1 N, N5 P4 c. W3 v% A' y' `
var ns = (navigator.appName.indexOf("Netscape") != -1); 6 Q( l5 }, m- ?* _2 X& @" ~
var d = document;
2 |. Z; \7 p# q( c function ml(id)
1 x- L3 g+ n" Y n1 p7 j" s {
5 O( ~' `* [1 t' ~7 j& }5 X var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
$ \+ C0 j; }, U if(d.layers)el.style=el; : O& y+ D' l' ^
el.sP=function(x,y){this.style.left=x;this.style.top=y;};
# H: z9 U4 K4 ^# ~5 u el.x = startX;
1 `6 w9 U) K& a if (verticalpos=="fromtop")
2 c# ~9 o' P: E3 } el.y = startY; 4 _: C, ^- h% E3 A& Z- o
else{
1 y% x: E9 `& `, o+ H; U I% K el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight; ' F. p! \: w: ^/ R1 \
el.y -= startY; , s+ \" x0 r/ i4 C7 s: V U
}
3 [2 K0 h1 w! K/ g' _3 t return el;
7 |. ]9 C1 I. Q8 E5 X0 ? } 7 d/ U% ~4 @1 S( H3 ~+ Q [
window.stayTopLeft=function()
2 e3 X6 k1 j% \/ T, l { - ^- ^$ z2 p, H, W
if (verticalpos=="fromtop"){ 1 _7 Z& |, o9 s! z' l+ v9 G! ?
var pY = ns ? pageYOffset : document.body.scrollTop; " T9 I" q* e# d9 g
ftlObj.y += (pY + startY - ftlObj.y)/8;
: ~/ t9 s# ?. ^' v3 C% P( c }
# S% b1 z1 a0 a- e; N" J else{
8 S' Y$ ^. Y% g( e, x2 r' M var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
1 C0 A/ m4 `$ o1 q ftlObj.y += (pY - startY - ftlObj.y)/8;
6 R9 M* {) F" }! M& E( W" ` } . g8 n$ } y4 ?; Z M
ftlObj.sP(ftlObj.x, ftlObj.y);
9 v+ D- |1 g# f& D1 h* _) U setTimeout("stayTopLeft()", 10); + y, q" W& `' N/ X: A
}
% z& g; F/ q6 H1 G% J ftlObj = ml("divStayTopLeft"); 4 R# g6 x% f: w$ {
stayTopLeft();
& }, j$ _$ \ @/ d}
& n% ]4 ]( v3 J; i7 Q$ M6 q1 N* dJSFX_FloatTopDiv(); + D( K$ w7 L0 r6 H: I. h% L
</script>
( x4 S* H7 p5 K/ N9 |% w7 C1 w" U</html> 7 s7 v& G# A# i' {0 [- r0 C
第三步:下载相关素材(在图片上点右键-图片另存为…),保存到images目录下。 & K7 i1 g- m+ m
http://imis.qq.com/images/wpa/images/kefu_up.gif
; C z! u2 F! `+ q1 J$ mhttp://imis.qq.com/images/wpa/images/ kefu_middle.gif
- N- c4 a7 E" ` ~0 Y* lhttp://imis.qq.com/images/wpa/images/ kefu_down.gif , s' o- N0 Y3 N$ E
http://imis.qq.com/images/wpa/images/ QQonline.gif
& d' P, P) o* Y* z/ Q0 ], o! mhttp://imis.qq.com/images/wpa/images/ QQoffline.gif 4 q' ? d3 V7 q# \
http://imis.qq.com/css/im.css
+ N& H4 t, q. U: V第四步:将所有文件和目录保持原有结构(kefu.htm和文件夹images),拷贝到您的网站目录中,在你要添加“浮动QQ在线客服”的页面的最后面添加一行:<!--#include file="kefu.htm"--> |