|
浮动QQ在线客服&网站QQ在线咨询 7 q" T8 I( i" }! b9 n
第一步:先把以下代码保存为kefu.htm . J- ~4 o. S, z1 c% |
第二步:按橙色说明修改 4 F2 p: j$ u: v* q; \
绿色部分是要修改的内容,html文档中不包括说明文字:
7 F( c% l _8 Q2 @<html> # T) M) J9 E$ f8 P, G7 S
<head>
+ ]7 O1 g- f3 M# \0 u<meta http-equiv="Content-Type" c>
2 z9 {, |& g9 r1 ? l<link rel="stylesheet" href="images/ im.css" type="text/css"> ) ]& {3 r; _$ s* q
</head> # t6 g2 e: ^ L& s
<script>
. X$ l1 A4 ?. O r4 n8 R- vvar online= new Array();
: v* X& u1 Y- {/ j: k4 ~- Oif (!document.layers)
/ W9 N1 Z- x: n% A+ X* ~& Pdocument.write('<div id="divStayTopLeft" style="position:absolute">')
# ^: Y9 P R" _3 v$ R</script> , k' Z4 \8 t9 K q) B- R) _
<layer id="divStayTopLeft">
5 i7 R h- Z& _3 C \! G<table border="0" width="110" cellspacing="0" cellpadding="0"> % M) u5 B( n4 E1 u; w8 R b
<tr><td width="110"><img border=0 src=images/kefu_up.gif></td></tr>
l! `) i/ v9 @' n<script src="http://webpresence.qq.com/getonline?Type=1&27089965:27043921:56129874:"></script>
& [6 r( t* t9 {将绿色部分修改成你的所有客服QQ,多个QQ用半角冒号隔开,最后一个QQ号后面也必须以半角冒号结束 * j4 }. D6 o4 L1 B$ C- o* n! N
1 E2 e t' _/ B
以下部分显示第1个客服QQ,注意:online[0]
0 A& V4 K4 @( a t! o<tr><td valign=middle background=images/kefu_middle.gif> 2 ]# z* t) W7 H4 Q( F
<script>
x2 J3 @2 M3 N2 p# r4 _if (online[0]==0) , }. [' L9 l* D) N" B6 |% 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>"); 7 M) I( n' N4 s- Y
else 6 h% o0 P7 v( W: h1 i8 b1 a# T* G
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>"); ' x/ o. m/ R" X" o8 a. }% s
</script >
& w; u( h3 [; Y2 B6 |: O% r3 B</td></tr>
8 k0 x/ o5 K# b, D% l/ W9 A" f! o0 F " g/ J$ ^5 C. o
以下部分显示第2个客服QQ,注意:online[1]
7 D2 B v' M! ? l4 Y. x3 @<tr><td valign=middle background=images/kefu_middle.gif> / l0 t O _# m3 Y" a9 a7 h" \
<script>
% V9 m* ], O G, l Q( Aif (online[1]==0) ) O L( W7 {% a M( q4 s2 C; j
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>");
$ q8 Z8 A/ G! q/ P5 E2 r# W8 ~! ?' Relse # W; t3 F2 A7 A2 m: l& I9 [( J
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>"); - ?/ G- {5 E; B; k- Z# {
</script > ' t) }2 X5 Y% ]% _& p4 h' O
</td></tr> 5 m7 I \6 E0 [8 U* r8 \- D& A
u3 A% Y1 B7 v- n$ G
以下部分显示第3个客服QQ,注意:online[2]。 3 g* s! A" o" N1 w8 B h! A# P% R1 h) O
<tr><td valign=middle background=images/kefu_middle.gif>
/ }! g& ^) o E0 O- |3 a7 l( U<script> 2 T7 O! D- O" |! m2 x
if (online[2]==0)
6 D- N2 M! P) r. z6 u, X! ldocument.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>"); + G4 d' C9 Y) b5 X R K6 N
else 0 o% S& U2 r( e
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>"); , ^1 e$ ]) \+ W6 c
</script >
0 O# R' J1 B' p</td></tr> + {4 J! S8 y/ k
: p1 q& m2 E* { u# E. s多个QQ,按以上规律复制上面的代码后修改online[0] 中的数字(第1个QQ为online[0]、第2个QQ为online[1]、第3个为online[2],以此类推)和QQ号(每组代码中有2处位置改为QQ号、2处位置改为昵称)。
; U, T8 F5 y& j
% ~; K# z5 Y7 p" R1 T- Z<tr><td width="110"><img border=0 src=images/kefu_down.gif></td></tr> ; l% I- ^/ ~! x2 N9 C% \4 e
</table> ' ~& R4 R, [8 N8 v( r
</layer>
. ]$ t! j) ?: Z. E<script type="text/javascript">
' {; `2 O9 u+ S# Y6 r9 P//Enter "frombottom" or "fromtop" " W9 f* H( p6 W! y2 v, ~1 T
var verticalpos="frombottom"
6 p; p" A6 l9 z- eif (!document.layers)
8 v/ x+ o7 s% l" L M R V" X2 rdocument.write('</div>') 7 R" m! A* ]1 k2 W: y7 v1 Y
function JSFX_FloatTopDiv()
$ B: F# w! W$ u+ K, o. a' X{ 7 X. w) B8 M7 C+ V0 ?; Z# q
下面的var startX =3是水平位置,250是垂直位置;默认情况在屏幕左侧显示,若要改为右侧显示,修改3的值(var startX =3改为var startX =screen.width-150)即可。 / K4 \' K$ p: U' T( R+ Z( ?
var startX =3, 6 W/ X& w& w1 V3 t2 w8 V
startY = 250; 2 m; W& o/ j/ q/ n
var ns = (navigator.appName.indexOf("Netscape") != -1);
% a2 W: k9 o2 y; d- {% u& u, v var d = document;
) E& L: e7 }& |4 b, w; M+ D! t function ml(id) 1 ]/ R- e4 c2 [* j6 x0 y1 B5 E
{ * y6 X& e k$ I r9 ?
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id]; 4 d" z! b- T/ ?: {' D$ P" V5 Z
if(d.layers)el.style=el; , G( h' R" z/ H. X- |
el.sP=function(x,y){this.style.left=x;this.style.top=y;}; . K) c( v7 v: N4 c8 f) @
el.x = startX;
8 e- s$ i g& T if (verticalpos=="fromtop")
/ H0 e `! F: \, v" B el.y = startY;
' I7 P- O8 R5 u6 s. r! { else{ $ J. T4 b1 v, N0 {7 p, Q/ a
el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight; : d* |. `: [: o1 k4 l4 I+ j
el.y -= startY;
( ?4 |% U7 I: x- j7 ]$ p/ G }
' j7 |. d: M5 }3 u return el; 5 {( ~1 |; e2 O$ n
}
- c4 q2 [7 M5 R window.stayTopLeft=function()
9 a V0 J( H6 k7 e% J$ z6 r {
; C3 p: X; g, g9 y if (verticalpos=="fromtop"){
/ }1 i& f% Y* F7 {, Q4 H- b+ q var pY = ns ? pageYOffset : document.body.scrollTop;
8 O; W0 D- A3 E6 `" { ftlObj.y += (pY + startY - ftlObj.y)/8;
3 h" ]% F$ F3 d3 Q } Z! y* o6 c" V1 T% z! ]0 {* C/ h
else{
5 T$ i7 I/ B8 y var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
. e* A- K+ e3 j6 q; A8 U' U ftlObj.y += (pY - startY - ftlObj.y)/8; 9 K! g$ C K1 |- Q$ ~
} 0 s1 i* t7 g, E+ i7 X1 a: q+ @: h# U
ftlObj.sP(ftlObj.x, ftlObj.y); 6 m9 p$ r% b9 F1 i) Q
setTimeout("stayTopLeft()", 10); $ Y" X h& }4 S2 d- r7 m
} ; o6 x; d: L1 p2 T# g; b ]
ftlObj = ml("divStayTopLeft");
/ ^- T* H7 V' W7 z/ G: F$ b6 I stayTopLeft(); * z* c1 z/ \6 s! `: j' y$ j
} 4 \9 R0 Z. J4 P* y$ Z
JSFX_FloatTopDiv(); / {* T; t" [9 j" i5 ~
</script>
- J. R6 M/ s" y4 M6 ~! Y( v C</html>
# g7 Z0 F& H/ C第三步:下载相关素材(在图片上点右键-图片另存为…),保存到images目录下。
6 j& r! M B3 d0 a l$ d( Vhttp://imis.qq.com/images/wpa/images/kefu_up.gif
0 b4 [) t7 K3 l. o4 ]http://imis.qq.com/images/wpa/images/ kefu_middle.gif * G6 g+ v- b5 y( x7 ^9 {* g
http://imis.qq.com/images/wpa/images/ kefu_down.gif ( |$ c4 o( t7 g3 F9 l9 E4 V
http://imis.qq.com/images/wpa/images/ QQonline.gif
) h1 ~0 h0 Z6 I5 t% Uhttp://imis.qq.com/images/wpa/images/ QQoffline.gif
: |. A7 K3 m* T- U) V4 Thttp://imis.qq.com/css/im.css
; }$ b8 i( M* l% h& {8 S( z0 \第四步:将所有文件和目录保持原有结构(kefu.htm和文件夹images),拷贝到您的网站目录中,在你要添加“浮动QQ在线客服”的页面的最后面添加一行:<!--#include file="kefu.htm"--> |