|
浮动QQ在线客服&网站QQ在线咨询 y7 j$ q, t/ L
第一步:先把以下代码保存为kefu.htm
* H6 q! O, Y" d$ I) w& ~8 i第二步:按橙色说明修改 ; Y( r; H- @% R1 ]) ^" ^
绿色部分是要修改的内容,html文档中不包括说明文字: ( U+ ]6 K# ^# W( v X' w" c/ g
<html> 6 j- p2 `3 {! M" a% A
<head> 4 B' |; h' c1 j: [2 e
<meta http-equiv="Content-Type" c> / ?4 y/ \6 W% g w3 x3 Q" d
<link rel="stylesheet" href="images/ im.css" type="text/css">
) l* W( o/ y [9 H) e: n5 ?, d# X</head> ( _" |8 T0 o' G
<script>
8 g' \* z( _7 G ] [var online= new Array(); 9 ?3 Y* q7 t- Z7 J- B1 E! ?7 p. w- A
if (!document.layers)
) I$ U" z+ c H- \0 i: W1 s6 t) Cdocument.write('<div id="divStayTopLeft" style="position:absolute">') , v$ t; K( E+ a0 m+ x
</script> ; Y6 e9 p- O* I# a, d
<layer id="divStayTopLeft">
9 g- P: M' ], @8 W$ W: B. D4 ~<table border="0" width="110" cellspacing="0" cellpadding="0">
8 W9 U9 J! L, {: |/ y<tr><td width="110"><img border=0 src=images/kefu_up.gif></td></tr> " S2 @8 c- g# R/ ^ v
<script src="http://webpresence.qq.com/getonline?Type=1&27089965:27043921:56129874:"></script>
7 W/ k; e9 ~3 x! H; E9 L7 V将绿色部分修改成你的所有客服QQ,多个QQ用半角冒号隔开,最后一个QQ号后面也必须以半角冒号结束
0 x: O5 \; f8 v K, O9 x
; x7 x) [- l$ y' g4 f0 K0 x6 T( O以下部分显示第1个客服QQ,注意:online[0] 1 R f& C+ M5 V; t& v
<tr><td valign=middle background=images/kefu_middle.gif>
+ V! m: H; T# Q! z7 N: I" u<script> : `/ E6 n* ?1 c4 H/ @% p
if (online[0]==0)
9 t: c! e4 i3 ?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; ^( q8 C7 R, u' H7 }else + S: z) Z0 w7 u/ e8 J( H
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>");
6 c4 f3 V, M1 e* u3 P</script >
& t) D+ V0 D+ }/ r% H# a</td></tr>
8 Z9 |8 I7 K! t% r; V6 n' b2 @
: ?( f0 O; C8 [! q0 O& E6 {( x5 R以下部分显示第2个客服QQ,注意:online[1] $ H+ w& G, |; {
<tr><td valign=middle background=images/kefu_middle.gif>
0 K4 w2 u( c1 T. t<script>
0 [+ K1 e/ @, sif (online[1]==0) 1 a d' ]. g, ?/ _5 d
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>");
) V2 p8 F2 H5 F8 l' T0 Qelse - M' l' s: [; A) j" r' P
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>"); ! J; ~! |/ u* O; t, |6 D9 b- K
</script > . Q3 a' } |- r _3 Y: s, D
</td></tr> 7 P- K" E2 A" b: S7 k0 G, B
6 Z% U4 i1 I4 ^3 y$ S: ?/ @ k以下部分显示第3个客服QQ,注意:online[2]。 4 O2 p' `1 g. C4 |( I
<tr><td valign=middle background=images/kefu_middle.gif>
4 i: g: K: x* G4 ?/ ~, [" O0 `) ~<script>
3 f9 e* p" p$ f! X5 V7 {if (online[2]==0) $ x3 y5 p/ ^3 K0 F% D/ ?
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>");
& y3 ]2 R7 i7 k2 Q! v: qelse - u8 V( _# p2 ~+ q! D% X2 Q+ n
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>"); : d4 ~* |' o8 y
</script > 2 U5 o# N; X, a; O
</td></tr> 9 o4 @, d* J! _: f" _3 m
( c7 a- @0 u$ D3 P% s5 m
多个QQ,按以上规律复制上面的代码后修改online[0] 中的数字(第1个QQ为online[0]、第2个QQ为online[1]、第3个为online[2],以此类推)和QQ号(每组代码中有2处位置改为QQ号、2处位置改为昵称)。
+ y! J' K+ R. [0 w7 b& E
Q7 {* z! \. T+ T( g" s$ [<tr><td width="110"><img border=0 src=images/kefu_down.gif></td></tr>
7 }; ]! E: ~% h" x9 Z! Z/ G3 q</table>
. o# T$ D! c( c8 _: y</layer> ( C+ D R# ?+ p. ~5 l3 _
<script type="text/javascript"> . B' C8 B4 ]# T: ~$ h! `" {
//Enter "frombottom" or "fromtop" ) c2 ]" d( b2 ^& x/ f3 P
var verticalpos="frombottom" 7 U, `' h7 C' ]+ G8 Q; a- ?, o
if (!document.layers)
4 G+ `/ h# d, L% q7 ^$ cdocument.write('</div>')
3 m* u7 F3 l; ^$ y$ k zfunction JSFX_FloatTopDiv() 2 H( y7 c$ o9 a& T3 X8 g, d p# o
{
# U5 c1 P) x, a下面的var startX =3是水平位置,250是垂直位置;默认情况在屏幕左侧显示,若要改为右侧显示,修改3的值(var startX =3改为var startX =screen.width-150)即可。
' F0 `3 H3 d$ h$ j+ P4 j/ c, | var startX =3, % I$ O1 _7 X3 i; ~
startY = 250; " a; d0 m1 x$ D6 f) Z
var ns = (navigator.appName.indexOf("Netscape") != -1);
7 G, C0 G I/ U1 m6 s var d = document;
; @, ~) F: x9 Q function ml(id)
; m1 }5 @% d; x9 F { 9 g) a( g5 W; W3 @8 g
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
$ K: p. I1 D+ s' t9 q7 c a if(d.layers)el.style=el; ' n8 O0 G7 X; K2 I8 k
el.sP=function(x,y){this.style.left=x;this.style.top=y;};
+ H& ?) O0 N y, Y& ~3 v; K% z' D el.x = startX;
) Z: g! t5 Q5 j, j if (verticalpos=="fromtop") 7 M3 l/ x9 {/ ?& Y3 f+ X
el.y = startY;
( Z, I$ `! k. L else{ : \# Y! C/ P3 y, J% l
el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight; ' x0 L% j) d- t! d% q& T* I7 R
el.y -= startY;
! T% N+ V/ g1 L. W }
; m( j# ^) a5 q6 W6 d1 B0 E \ return el;
) h7 z5 K4 d, l! i }
& Y/ n. g4 R8 S9 N8 I+ L; L window.stayTopLeft=function()
6 m. o& i9 o2 x) ^3 l! K" ? h {
q& q6 {" F/ n* n8 A: k if (verticalpos=="fromtop"){
% e* d2 n- B+ U+ N) f/ { var pY = ns ? pageYOffset : document.body.scrollTop;
, A5 Q$ H6 a" K3 p/ n* c. w$ i ftlObj.y += (pY + startY - ftlObj.y)/8;
; k: k7 s' S$ M1 _. e8 U } / t+ a3 u! [ ?
else{
& ~0 f% H E u) [ var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight; $ ^; u' U& {; H- [. E
ftlObj.y += (pY - startY - ftlObj.y)/8;
6 O" I1 H+ S8 m- O }
. w% r( {; z/ t ftlObj.sP(ftlObj.x, ftlObj.y);
5 g" S7 j( s6 C3 g b setTimeout("stayTopLeft()", 10);
2 B a9 A0 \4 b& ^/ Z }
& q' Y2 u; g) H" c. _2 C0 v ftlObj = ml("divStayTopLeft");
, x. Z$ Q5 S( O5 m- m% L. B stayTopLeft(); " R& P8 u4 Q5 V! s/ M
} & G& @* S }0 M% t* @3 n' J0 u2 l
JSFX_FloatTopDiv();
( F: N) J. P" A2 E</script>
0 V$ t5 I; M/ J</html> 0 P% d/ g3 R3 `8 l* D; X, I! e
第三步:下载相关素材(在图片上点右键-图片另存为…),保存到images目录下。 , W* I) j ~' r: ^
http://imis.qq.com/images/wpa/images/kefu_up.gif
& n# h/ ~. K- r. W: u& Ehttp://imis.qq.com/images/wpa/images/ kefu_middle.gif
3 s$ n0 m b9 I; s) m5 U7 |http://imis.qq.com/images/wpa/images/ kefu_down.gif $ {8 [/ V7 o! J- n2 _% P1 h- J
http://imis.qq.com/images/wpa/images/ QQonline.gif 9 m q1 C v2 @0 K" x- `2 A- W9 ?
http://imis.qq.com/images/wpa/images/ QQoffline.gif
, Z2 s# o( D" ~& Shttp://imis.qq.com/css/im.css # I4 }2 J6 m3 {
第四步:将所有文件和目录保持原有结构(kefu.htm和文件夹images),拷贝到您的网站目录中,在你要添加“浮动QQ在线客服”的页面的最后面添加一行:<!--#include file="kefu.htm"--> |