浮动QQ在线客服&网站QQ在线咨询
: `; i8 `) m$ m" D8 K" O2 C第一步:先把以下代码保存为kefu.htm
/ R- W7 M3 _. I0 ?# U3 ~第二步:按橙色说明修改 + ^. o' d: _* M2 Y
绿色部分是要修改的内容,html文档中不包括说明文字:
{! B6 E, f$ d( U<html> & Q8 x0 m7 y* ] e
<head>
/ i6 R: X. I4 W9 U2 ?4 g. I4 I<meta http-equiv="Content-Type" c> ' I5 _/ c- E4 Y+ P6 o Z. B: z
<link rel="stylesheet" href="images/ im.css" type="text/css">
. |9 S. {( P& b" \</head> ; H3 R- j' R$ T/ D% H D2 B6 a( ~
<script>
( X4 E F5 g3 S0 Z3 j" kvar online= new Array();
: _8 h$ |1 F+ i2 T- O+ Aif (!document.layers) " G" ~' D+ y) u+ ]' g
document.write('<div id="divStayTopLeft" style="position:absolute">')
( i+ @+ d3 h L5 ]% ~</script> ( t' ]% D- y# s7 m, ?0 {' r0 n
<layer id="divStayTopLeft"> ( J! @0 Z% p, B: J6 o
<table border="0" width="110" cellspacing="0" cellpadding="0">
9 I% j4 x1 o, q4 Q! u7 c<tr><td width="110"><img border=0 src=images/kefu_up.gif></td></tr>
$ s: x9 H# k3 l) E. h ^1 {! \( p<script src="http://webpresence.qq.com/getonline?Type=1&27089965:27043921:56129874:"></script>
3 J: K% M( J! F, h将绿色部分修改成你的所有客服QQ,多个QQ用半角冒号隔开,最后一个QQ号后面也必须以半角冒号结束
0 a0 M9 ]. b/ P. y- b
6 B- z- `* M' A以下部分显示第1个客服QQ,注意:online[0]
! r! F/ H! w, M$ e# M! b' d<tr><td valign=middle background=images/kefu_middle.gif>
8 K; X# s% t3 \; U! w& Y<script>
5 _. x; o" u" z/ C+ Q, C& aif (online[0]==0) * }! |9 ^, M4 j f$ n9 a2 _
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>"); ! e/ ^* t6 c5 P c' S5 Y) \: t
else $ y3 q7 z. ]! S( |+ W
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>");
+ a! M2 a; [7 r8 R0 ]</script > 9 y$ G+ ~2 y( e7 G
</td></tr>
% @% A5 o( @$ ~9 S- S, }! E
; j4 Z1 M1 H O; j6 ?以下部分显示第2个客服QQ,注意:online[1]
8 |% z, h% h* w8 |+ S# K<tr><td valign=middle background=images/kefu_middle.gif> ) h* P& S, \, c( M0 k( b/ g) m/ e+ V
<script> & @: c2 b4 d5 a: e* G- h3 Z
if (online[1]==0)
. R9 {; N$ w; X0 _' N8 l6 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=27043921&Site=在线咨询&Menu=no' title='客服不在线,请留言'>技术支持</a>");
1 z7 \' h, T6 |6 @+ selse
9 M" @) `5 L; i |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>"); 9 V. ^; O0 D9 q, v. H, S0 i/ T
</script > . z- m( J7 x+ D& n2 j
</td></tr> : } L" O( v4 u) S
/ u* ~- E$ E( P2 p4 L _' h9 R- d以下部分显示第3个客服QQ,注意:online[2]。 5 l. T6 v# I9 a ^ I9 }" A
<tr><td valign=middle background=images/kefu_middle.gif>
' i* f* `& x6 @! k: x. Z* @- W ]<script> 6 f( ]5 S8 I3 \8 @
if (online[2]==0)
. m. C2 x- H$ ddocument.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>"); 3 `0 [7 G3 }4 L9 |2 s) G) a/ R
else 9 ]) e+ v) k1 O/ o9 w D9 s
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>"); 0 Z/ b* Q# x" K5 c; D- d: ^! o/ p
</script > ! m, L9 o' J6 s& ]) r2 T
</td></tr>
/ a6 b: N- Q8 U* k
0 G; J' J5 Z1 q c: O' d多个QQ,按以上规律复制上面的代码后修改online[0] 中的数字(第1个QQ为online[0]、第2个QQ为online[1]、第3个为online[2],以此类推)和QQ号(每组代码中有2处位置改为QQ号、2处位置改为昵称)。
2 |" o2 u; W/ |: F9 z 7 l) D5 J2 w: \' C$ u% l- [
<tr><td width="110"><img border=0 src=images/kefu_down.gif></td></tr> $ `' x; H1 R9 r0 \
</table> , ^9 C: l. ~) _4 G( }# y3 Q1 N
</layer>
# C/ S6 [& O+ W" ^9 a$ o$ Q3 z<script type="text/javascript">
6 w7 |/ ?" g+ C+ a5 e5 D* X//Enter "frombottom" or "fromtop"
$ H# r5 u$ O# _/ T! F9 v; W/ avar verticalpos="frombottom" 3 c7 E$ G# E$ C. V I9 F- N/ u" ^
if (!document.layers)
4 n( P3 V0 W, T7 M8 Z, Cdocument.write('</div>')
* D' p3 N9 n* k4 f: ?" y* a$ m0 }# f2 Afunction JSFX_FloatTopDiv()
0 B* \9 H z" T6 I4 R{
9 w% M9 W; w3 a- p下面的var startX =3是水平位置,250是垂直位置;默认情况在屏幕左侧显示,若要改为右侧显示,修改3的值(var startX =3改为var startX =screen.width-150)即可。
$ N; {% s, y* x+ _6 Z var startX =3,
. x: L- D' V$ Z$ H8 W startY = 250; 8 l& T) I( g" m6 [1 N8 O
var ns = (navigator.appName.indexOf("Netscape") != -1); 0 L; q, U8 H" x) H5 X. c
var d = document;
# f# Z5 R8 \. T: ^2 }# J8 @ function ml(id)
/ [; U% y% H* V0 f1 G5 z {
2 [% J, ^/ q7 g8 N0 W6 c1 P var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
z6 N9 x8 X& Z6 i8 x if(d.layers)el.style=el;
# w: L' A8 z2 A el.sP=function(x,y){this.style.left=x;this.style.top=y;}; 5 M- J" P6 V9 P2 e9 [* L9 ^
el.x = startX;
' U& R9 v( q3 a3 c$ M4 l: p3 c9 c if (verticalpos=="fromtop")
( a" b$ L6 @$ r, y+ E0 n5 G el.y = startY; / y- ~4 g) r* d, r& E
else{
2 j7 h4 g( x# V% n el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
$ [ D* v$ }6 ~2 L6 ^4 { el.y -= startY; ; K# C% Y2 `2 j( V8 s
} " \" h3 A2 K* F- C3 u/ K X
return el;
/ ] h, X7 P9 d p( [! T, T }
. b0 X( o' k1 \3 ], { window.stayTopLeft=function()
. S" W& g$ Q0 F0 Q { ( `. k$ a: S( W+ x7 k' x7 X
if (verticalpos=="fromtop"){
$ [. F- W V" M/ ? var pY = ns ? pageYOffset : document.body.scrollTop; - @3 X" }6 ]% V# @1 f& T! q6 a
ftlObj.y += (pY + startY - ftlObj.y)/8; 6 g5 A( W* `( p' _, o6 n
} 0 U4 y7 q1 O* V6 k0 ]2 C
else{
. a; {& J* ^5 d* n# r; n var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
! Z0 X) j( C* a4 |$ M* z3 @, n% e. v# F) d ftlObj.y += (pY - startY - ftlObj.y)/8;
; R9 w% |7 v C: q9 s6 i }
$ ]1 _* h3 u) w: o9 R ftlObj.sP(ftlObj.x, ftlObj.y); 1 z0 L) D. n' C1 v o V
setTimeout("stayTopLeft()", 10);
: s% x/ f; u/ B& m } 7 J7 r0 R, Q7 B( j5 W4 g5 Z0 \
ftlObj = ml("divStayTopLeft");
0 L8 r5 d# U: d7 Q" x" Q' ?. z stayTopLeft(); ; Q6 }( M+ T. ^! U1 k
} + x2 [8 s5 R. b+ I
JSFX_FloatTopDiv();
7 N# F, G G" V3 K" e @" {* ^</script> d( N6 B- A, }0 M1 A0 L M
</html>
. U5 ~. Y& G" a" \% \第三步:下载相关素材(在图片上点右键-图片另存为…),保存到images目录下。 3 q4 X% Z- j5 u3 z7 I) M5 n2 P4 ^
http://imis.qq.com/images/wpa/images/kefu_up.gif 9 F) o0 e7 y# x7 T) e
http://imis.qq.com/images/wpa/images/ kefu_middle.gif
* W, |; G' P7 d/ G. y. Nhttp://imis.qq.com/images/wpa/images/ kefu_down.gif # m6 j- y8 I6 T& D/ p d; I0 ^/ ^
http://imis.qq.com/images/wpa/images/ QQonline.gif
% d! @# f9 p ]. G5 nhttp://imis.qq.com/images/wpa/images/ QQoffline.gif ; X4 y( Y& _' r! ~
http://imis.qq.com/css/im.css ( C# U9 [% i6 H/ y2 }
第四步:将所有文件和目录保持原有结构(kefu.htm和文件夹images),拷贝到您的网站目录中,在你要添加“浮动QQ在线客服”的页面的最后面添加一行:<!--#include file="kefu.htm"--> |