|
浮动QQ在线客服&网站QQ在线咨询 " s% t# V. |8 m8 b, @6 c
第一步:先把以下代码保存为kefu.htm 2 F Y- z1 N! |( t4 ?- Q
第二步:按橙色说明修改
$ h- l- [. y! @' V绿色部分是要修改的内容,html文档中不包括说明文字: . z7 ]' a) f! x
<html> - ] g$ Y' `7 z; {+ h! c
<head> ]1 f# t! e8 b h* [6 |# p
<meta http-equiv="Content-Type" c>
2 S9 [" F/ v6 n. ?<link rel="stylesheet" href="images/ im.css" type="text/css"> / Z+ I2 K! [; T; u H
</head>
) j, I/ V! U7 o4 m! q- [, N<script>
* d! }' T9 b }1 t7 U. z" @var online= new Array(); " j8 R" k1 V8 ]( N6 q4 Y0 y
if (!document.layers) / E0 b7 t( ?, a r
document.write('<div id="divStayTopLeft" style="position:absolute">')
( b2 s4 W3 g5 u, _8 Y</script>
, Z1 _! V# }5 ~. }+ N<layer id="divStayTopLeft"> ; k0 U' s% i* _; N# c$ G; p
<table border="0" width="110" cellspacing="0" cellpadding="0">
# _! ~* C! z. g* @; ]<tr><td width="110"><img border=0 src=images/kefu_up.gif></td></tr>
; v0 P3 R! U3 h) h1 b- R3 B<script src="http://webpresence.qq.com/getonline?Type=1&27089965:27043921:56129874:"></script> : y! j9 [9 ?7 \
将绿色部分修改成你的所有客服QQ,多个QQ用半角冒号隔开,最后一个QQ号后面也必须以半角冒号结束
* W! [' C( E6 R# X9 e- l$ Z + w* u" c1 S/ D( B$ U8 r( F4 n
以下部分显示第1个客服QQ,注意:online[0] " A8 r/ ^+ }) a+ l- D, J3 {
<tr><td valign=middle background=images/kefu_middle.gif>
6 m8 o6 A1 i0 O6 O<script>
" X) X8 j' K+ U6 c/ ]# U: Zif (online[0]==0)
$ \% M/ C8 }5 C! hdocument.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>"); ) ]# [% J; H6 o8 }
else
2 u0 s2 c/ e/ v& P' V: ~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>");
0 n( G' R3 [/ y; G- l</script >
7 a) b2 X1 m" Z! P2 Y: M' h</td></tr>
, C( d7 |8 i6 [: {$ `6 \7 ]6 v ' h. b# c0 ~( x' ?: W0 p
以下部分显示第2个客服QQ,注意:online[1] " c( d% b3 ^8 J2 H$ h" ^" I
<tr><td valign=middle background=images/kefu_middle.gif> , M8 \' w% [) S& a' `, `+ Q! f
<script>
! N6 Y a' h0 x' Y4 M$ F) b7 {" Nif (online[1]==0)
' d( r" {. [: T1 P* A% R3 [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>"); + N2 r" J. R7 L# u8 F/ U/ D# Y
else ! X' M* `% y! T2 t, R& 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=27043921&Site=在线咨询&Menu=no' title='在线即时交谈'>技术支持</a>");
* E2 `$ K- O4 b3 W7 P m</script > " Q- \. i( U) y' `8 g/ N% B6 u0 G
</td></tr>
- @3 w( X1 W' ?* G0 b# L8 G! E
# k4 E1 l& Y/ Y/ ?8 `- \5 Z) T以下部分显示第3个客服QQ,注意:online[2]。
% b% u( l1 J' b" N& W6 ]/ r& F<tr><td valign=middle background=images/kefu_middle.gif>
2 X$ P, h# u# S, w' G4 [- M Z<script>
" {7 Z! L8 q' V U6 Q2 z6 \/ Zif (online[2]==0)
q+ S0 r5 C) X+ T' j% qdocument.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 y7 X8 _& [' _+ o# i! e; E+ H
else 5 ~/ W- o* ~( r# m* @
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>"); 4 ?4 x/ O/ y8 g7 [
</script >
|* F8 y' Z" L6 z3 M3 ~</td></tr>
3 \, x+ K: _) M# q% Q
( S: b7 P: c" P. ?) m$ V' ~" W7 F多个QQ,按以上规律复制上面的代码后修改online[0] 中的数字(第1个QQ为online[0]、第2个QQ为online[1]、第3个为online[2],以此类推)和QQ号(每组代码中有2处位置改为QQ号、2处位置改为昵称)。
1 _1 c9 ^1 p( a! e: u( i# i
9 q1 t5 Y. C9 [4 c1 \<tr><td width="110"><img border=0 src=images/kefu_down.gif></td></tr> * w! R1 h$ c6 r6 x6 x; l( C
</table>
* P4 m t" V$ }4 p* m k</layer>
0 W8 B2 R+ {) ]) j" V9 ?' |2 w<script type="text/javascript"> * j: @2 G! x' _+ _* Z/ T
//Enter "frombottom" or "fromtop"
$ [$ z& j% g# I- W- {5 y+ X! @# Nvar verticalpos="frombottom" , }1 A3 @, P) T% e
if (!document.layers) " s( h$ A5 w) ]8 T# C
document.write('</div>') 6 X1 y2 b/ I/ m
function JSFX_FloatTopDiv()
/ m8 P: g. i4 f{ ' G4 l( @! S2 u7 q7 L1 ~
下面的var startX =3是水平位置,250是垂直位置;默认情况在屏幕左侧显示,若要改为右侧显示,修改3的值(var startX =3改为var startX =screen.width-150)即可。
& o, V' i* @- t# d b: i var startX =3,
& f. ~7 s H3 f y9 P A. e8 s% L. T3 T startY = 250;
' {( q- _3 [% A4 Q& F3 l var ns = (navigator.appName.indexOf("Netscape") != -1);
4 a& o$ |- ?$ A; a+ w+ w7 z var d = document; , j2 m0 D; `. w: a3 g4 n L( U7 H
function ml(id)
) R+ |$ O3 v2 M! `# a! Q' { {
# q: H1 i) f9 o! l var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id]; 5 |& j4 A- w/ r4 v' Q
if(d.layers)el.style=el;
! A0 z' x7 n' l5 w9 j el.sP=function(x,y){this.style.left=x;this.style.top=y;};
/ w4 J" `, ]" A# p4 F. U% k el.x = startX; 7 ]9 g7 p+ a+ S. z9 D: q
if (verticalpos=="fromtop")
; Y- C, S, O& E el.y = startY;
# h) G6 j3 @* w+ b1 E2 C: d else{ 5 u+ l7 L" @- C. h& p5 M
el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight; 1 W2 i% J y! P8 P& y u1 \
el.y -= startY;
" E& ]7 C( b, ] V; l) Z/ B } E! k* j9 S& y# k9 H' U
return el;
7 v4 W- P. j& D8 O+ J# p3 A& {& p } - k* s/ m3 k, s: c# M8 w7 K3 @' k
window.stayTopLeft=function()
* h" z( O6 Y, W* D& M2 f {
" r F( d/ f a7 H3 Z, M, y if (verticalpos=="fromtop"){ 9 h0 q% p# W1 A
var pY = ns ? pageYOffset : document.body.scrollTop;
; N5 P; w; t0 |) J n6 W3 M' x/ F ftlObj.y += (pY + startY - ftlObj.y)/8;
* q. c4 J O( Z- M } ( Q! l" ?& h1 S
else{ - }# R2 B+ g- i+ `; w( A8 G0 J( X
var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight; 0 z( ?7 n M$ U
ftlObj.y += (pY - startY - ftlObj.y)/8; 4 \9 D2 `# c, z: j
}
$ e2 \2 e- j) \ u! ] ftlObj.sP(ftlObj.x, ftlObj.y);
# _7 U$ e# _9 e2 f: H d. l setTimeout("stayTopLeft()", 10);
, M" z& ^2 t! }- b% v; j } 1 q) x5 [8 N7 d. p
ftlObj = ml("divStayTopLeft");
5 D* X, z+ x o9 [ stayTopLeft(); 6 \6 |( K) y& \! R
}
$ C# B1 Q: \& K% D* h& G7 x9 |JSFX_FloatTopDiv(); 3 m% |" \/ T0 e4 A) d
</script> 6 C# `6 f4 |: s% _
</html> ! F( J; s8 ]/ G" e# L. w% ~' c1 L
第三步:下载相关素材(在图片上点右键-图片另存为…),保存到images目录下。 - R& L1 [) F* L6 ]
http://imis.qq.com/images/wpa/images/kefu_up.gif
* ~7 J- q5 x/ Lhttp://imis.qq.com/images/wpa/images/ kefu_middle.gif
& E# s2 h5 b+ R. Fhttp://imis.qq.com/images/wpa/images/ kefu_down.gif
1 `$ \9 Y8 J; Q) y" S0 o+ E7 Z# Bhttp://imis.qq.com/images/wpa/images/ QQonline.gif
% X: m u }2 a1 v/ ^& I7 a9 qhttp://imis.qq.com/images/wpa/images/ QQoffline.gif 7 D9 K: y+ L0 K2 }% Z5 p4 t
http://imis.qq.com/css/im.css 3 v' w; `5 Z* G5 @; V
第四步:将所有文件和目录保持原有结构(kefu.htm和文件夹images),拷贝到您的网站目录中,在你要添加“浮动QQ在线客服”的页面的最后面添加一行:<!--#include file="kefu.htm"--> |