|
浮动QQ在线客服&网站QQ在线咨询
+ }" K: S& [. e* S9 y第一步:先把以下代码保存为kefu.htm - {" ~1 Y) S W
第二步:按橙色说明修改
C5 P/ c0 F6 }7 \绿色部分是要修改的内容,html文档中不包括说明文字:
# N4 d O) `6 n& a' v! W' Z) R, x<html> $ _! e T$ q+ [2 ]- s% Z" t
<head>
7 u6 u, i" U- {0 ]<meta http-equiv="Content-Type" c>
+ T# N1 k8 @ N# w<link rel="stylesheet" href="images/ im.css" type="text/css">
5 c+ O) \' ^, h1 e- @" ]</head>
; T1 ]; m2 S9 v5 O- n3 _8 m<script> $ p3 u% Y$ p- s$ c6 | A3 B2 _
var online= new Array();
9 c$ Y4 H, K9 j4 L( M7 J6 ~if (!document.layers)
* I1 A5 e! K+ I) j; D# W8 ydocument.write('<div id="divStayTopLeft" style="position:absolute">') " i9 Z) l+ X. Y3 L
</script>
5 j3 a7 ?2 O/ O2 f9 `+ \<layer id="divStayTopLeft">
' r" U9 P0 C4 U+ j1 ] [- p<table border="0" width="110" cellspacing="0" cellpadding="0">
5 ?* N& h4 I& w+ `' v+ F. J<tr><td width="110"><img border=0 src=images/kefu_up.gif></td></tr>
+ K+ R( F* ] U: I9 l6 \<script src="http://webpresence.qq.com/getonline?Type=1&27089965:27043921:56129874:"></script>
9 V; ?# \0 i" i+ u9 d" t1 T: d将绿色部分修改成你的所有客服QQ,多个QQ用半角冒号隔开,最后一个QQ号后面也必须以半角冒号结束
* s( R A2 k6 Y# Q5 W: P7 U9 l " {( E1 D) w1 ~4 e, K
以下部分显示第1个客服QQ,注意:online[0] 8 [' P, Y, H* C* \8 e; G
<tr><td valign=middle background=images/kefu_middle.gif> ; x( |9 `. b' H8 l5 x0 m7 m4 I
<script>
@( C+ \4 X, z5 @( J" x; Nif (online[0]==0) % s" t2 q" e# a! S 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=27089965&Site=在线咨询&Menu=no' title='客服不在线,请留言'>售前咨询</a>"); / W3 t# T" T$ b1 C0 s
else
% `6 `4 B( A; y* Y; r, ? K P8 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=27089965&Site=在线咨询&Menu=no' title='在线即时交谈'>售前咨询</a>");
* Z$ i& j0 P/ e7 ?6 c</script > " R4 q$ a7 x8 }1 M1 O. g! u
</td></tr>
3 {. @( j2 k X1 I; K$ e& c ( v! ]" L" Y3 m8 S$ n3 g7 Y6 O; w
以下部分显示第2个客服QQ,注意:online[1] 9 p( f+ t. S2 O2 E
<tr><td valign=middle background=images/kefu_middle.gif> , H! P( x2 u* N2 o* P2 L L
<script>
4 g% u4 }0 N" F, x+ m/ Pif (online[1]==0)
9 {; d+ Z5 R0 @ k: k- ]8 k5 edocument.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>");
! U$ y% O! B8 ~% x% ielse
$ p$ r0 w* o8 \7 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=27043921&Site=在线咨询&Menu=no' title='在线即时交谈'>技术支持</a>"); * Y# G# w# b5 [; t7 V9 ^! J
</script >
0 G* @0 g) w8 A2 a& |</td></tr> 0 t% O. ]! Z. B& }$ C2 B# e
2 z0 |9 T/ j" S2 A( C
以下部分显示第3个客服QQ,注意:online[2]。
5 [0 `# r' ]5 z8 _<tr><td valign=middle background=images/kefu_middle.gif> % ]6 z. K% [; b% z: g8 t
<script>
5 E5 [+ b) I1 M- Z0 \' N6 xif (online[2]==0)
% y- ]6 {/ Z0 }7 ~& C4 Adocument.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>"); - Y2 p4 s7 m& g' h: M
else " O! q! R9 y- 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=240434782&Site=在线咨询&Menu=no' title='在线即时交谈'>代理合作</a>"); : }- b6 @ Y) L8 a: `+ n
</script > % @8 I% L- w* Q+ C5 {$ M/ V. C
</td></tr>
. U; y, J( G3 o$ `1 F, A 6 y* g4 s" _- J7 G/ M @- D
多个QQ,按以上规律复制上面的代码后修改online[0] 中的数字(第1个QQ为online[0]、第2个QQ为online[1]、第3个为online[2],以此类推)和QQ号(每组代码中有2处位置改为QQ号、2处位置改为昵称)。 0 h& C9 \* r# u9 p' X/ m% F
7 d& C: h! b I<tr><td width="110"><img border=0 src=images/kefu_down.gif></td></tr> , b+ z# D# J# I
</table> 5 J$ m1 q N7 z- K" V
</layer> , L2 }2 c% B) @6 S! ~% d2 G/ H
<script type="text/javascript"> # d: @1 D: P. J) N1 n+ P% u
//Enter "frombottom" or "fromtop"
3 V! K) l( z' n, w3 H- {var verticalpos="frombottom"
# t& Z" c3 ^1 r2 [& H+ tif (!document.layers) , C2 V! x! C5 _$ C2 ]
document.write('</div>') 9 w; q( @/ f. L2 z p3 J( S
function JSFX_FloatTopDiv()
* o9 w( l4 K6 s: {6 |2 H{ ! }. L: x5 k5 \+ [0 N! x- u
下面的var startX =3是水平位置,250是垂直位置;默认情况在屏幕左侧显示,若要改为右侧显示,修改3的值(var startX =3改为var startX =screen.width-150)即可。
4 q4 W) f, \* G x9 ] var startX =3, + U; `0 r5 ]4 _: Z2 R
startY = 250; , k; M5 F$ w0 k; ]0 N! l
var ns = (navigator.appName.indexOf("Netscape") != -1); ' x8 W; [$ O7 E. \& s6 I$ s
var d = document;
0 @* a- M' i* | function ml(id)
% ^3 m l; k4 o q9 U7 }: Z( h {
6 {. V5 O3 r& m. T7 Q ^ var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
( L1 H8 [3 a; k. f if(d.layers)el.style=el; ' R* Z0 X0 S7 _4 ^1 T
el.sP=function(x,y){this.style.left=x;this.style.top=y;}; / m: g8 T: H. g% U0 ^, @( ^. R3 O
el.x = startX;
7 [/ b! a% v% a. j9 a( ? if (verticalpos=="fromtop") 9 |* C+ Z Q9 J+ a: M% f- e
el.y = startY; ! K4 [$ f3 @$ q3 w
else{ ! J' {7 w [( U+ W0 H
el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
, p& o) C. Z4 O el.y -= startY;
* q- C4 t( E- W" i: c } 3 @; X, c* R9 @6 L# r
return el; ) }* c6 Y3 b8 K) j
}
+ d% D2 G; {* A- k, j, R! F2 z6 c window.stayTopLeft=function()
. F2 H& b" X& T8 u* R f/ ^ {
0 N3 m' F6 `8 h' W v' E/ [ if (verticalpos=="fromtop"){ 6 E6 l" O, p* b0 Q4 ~* b7 i& p8 `
var pY = ns ? pageYOffset : document.body.scrollTop;
- ^3 }& ]! a7 A; i8 @# I ftlObj.y += (pY + startY - ftlObj.y)/8; ' p3 r; T# F# r8 D; U H
} U/ C9 m& ~" B, c. r% Q) ~$ E0 P
else{ ; I% S4 ^9 X, q! X$ {
var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
) W" l9 W \: w! P3 |0 N, ?9 ` ftlObj.y += (pY - startY - ftlObj.y)/8;
8 n/ ?- p$ Z# d* r% e+ I } . H {+ N8 W* ~4 E1 D
ftlObj.sP(ftlObj.x, ftlObj.y); 8 w( p0 z) l6 d8 |; @4 B/ ]: n2 s8 h
setTimeout("stayTopLeft()", 10); 7 q' q9 S! O$ L' |9 t& K
}
2 Q! x2 j- Q3 r. F2 B% s ftlObj = ml("divStayTopLeft"); 4 B7 p' {! v& r
stayTopLeft();
' t+ T% _- t" A( E3 d4 s! t8 m}
7 A+ H! n) [ k. M0 ~JSFX_FloatTopDiv();
1 A; @7 v. n v/ q( V$ t( c: A</script>
1 ~0 f- c! J" O8 U+ H7 S3 X</html> 7 o' @% U7 [+ |* p" u4 U, T
第三步:下载相关素材(在图片上点右键-图片另存为…),保存到images目录下。
3 {) j+ Z$ i( {: I* \% G2 g( ]4 Xhttp://imis.qq.com/images/wpa/images/kefu_up.gif ~+ F" P# U0 z) H3 Y5 U) R
http://imis.qq.com/images/wpa/images/ kefu_middle.gif
( c9 a6 }0 [# r* [3 i uhttp://imis.qq.com/images/wpa/images/ kefu_down.gif
; B1 O- J) Q9 g' ~# b+ nhttp://imis.qq.com/images/wpa/images/ QQonline.gif
# t, u6 e. ~9 n" xhttp://imis.qq.com/images/wpa/images/ QQoffline.gif * j5 I' H" E5 z
http://imis.qq.com/css/im.css 6 C" |7 k* n0 \$ h, P9 W( B( @
第四步:将所有文件和目录保持原有结构(kefu.htm和文件夹images),拷贝到您的网站目录中,在你要添加“浮动QQ在线客服”的页面的最后面添加一行:<!--#include file="kefu.htm"--> |