|
浮动QQ在线客服&网站QQ在线咨询
& W7 T. E2 Z; q) O# ^- _5 E第一步:先把以下代码保存为kefu.htm
8 q0 ?9 o+ G ]8 V第二步:按橙色说明修改
* J$ D8 H- ^9 E/ N6 a* e绿色部分是要修改的内容,html文档中不包括说明文字:
8 [) D e' h1 v<html> ) p. ^8 y2 S( X$ ?& T2 l/ _" f; k4 c
<head>
* X) n0 H2 b7 t6 E<meta http-equiv="Content-Type" c>
( X$ g) [6 c9 t! F<link rel="stylesheet" href="images/ im.css" type="text/css">
- _1 z @, m' A% d8 E</head> ; _# O2 F6 [( @2 M! o, J
<script>
& }" t! J- X# {5 Y4 E7 B* E J( w4 ?var online= new Array();
- _7 y8 M. {2 O: ~; eif (!document.layers) 5 C! f1 _# @: v' a" Q& I; u
document.write('<div id="divStayTopLeft" style="position:absolute">') U6 _8 T& H# i
</script>
+ v" Q: a/ w, ~3 @2 W3 n$ U7 N<layer id="divStayTopLeft"> , n# t! }$ o( B0 v, g1 E9 Z. x
<table border="0" width="110" cellspacing="0" cellpadding="0">
4 Y1 {- K8 Z4 Z L! h2 o<tr><td width="110"><img border=0 src=images/kefu_up.gif></td></tr>
4 C/ m% A" Y" Z5 ]5 T2 ]<script src="http://webpresence.qq.com/getonline?Type=1&27089965:27043921:56129874:"></script>
; U e& |( n& r/ w% m+ K将绿色部分修改成你的所有客服QQ,多个QQ用半角冒号隔开,最后一个QQ号后面也必须以半角冒号结束
1 ]- [: B o$ M
8 c: p* ]" H7 W( K/ a/ G以下部分显示第1个客服QQ,注意:online[0] 7 |2 X. p4 m. j/ W: F
<tr><td valign=middle background=images/kefu_middle.gif>
, r' M; q' N( b: a; T# ^2 H+ u<script> . b$ [0 T! k2 s3 n5 H2 o
if (online[0]==0) 6 r) q r0 f! t& U
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>");
8 B+ h8 v1 u @else 5 o3 Y9 k$ ^- L2 n' 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=27089965&Site=在线咨询&Menu=no' title='在线即时交谈'>售前咨询</a>"); 7 O6 a- l5 y+ Z' j
</script >
' x" H6 O5 |5 a9 z% H</td></tr>
4 P' q' o' T" W. K1 B, L . N& }* P; j% ^+ o
以下部分显示第2个客服QQ,注意:online[1]
% e: r* w' B: m7 e4 r. j! x0 }, @<tr><td valign=middle background=images/kefu_middle.gif>
1 j9 [$ ] c% j! e Z* x9 w<script>
& s4 l9 u; N, Y$ N. i7 ^: {5 @if (online[1]==0)
+ M; w+ }; |; j4 ~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>");
0 Z- I! }, H s0 L9 [3 C; @2 celse 9 e. v7 z) N, b f" `
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>"); ; f. c0 D! c8 _3 H) V0 i4 n
</script > + I( _: p) a p9 B, |
</td></tr>
: }* O% A: b9 W5 }% Y6 k
) z3 P4 a6 t! `" D5 _以下部分显示第3个客服QQ,注意:online[2]。
1 G w. A+ J& e( x) m<tr><td valign=middle background=images/kefu_middle.gif>
% k& b4 @$ `8 I: G9 [4 l! V<script>
' U% U' j3 P5 mif (online[2]==0)
: W' O: |- @1 i8 F, \0 A1 r9 h; s& jdocument.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>");
4 Q: c j: n$ Kelse . ]& O7 n/ \( W! z& 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=240434782&Site=在线咨询&Menu=no' title='在线即时交谈'>代理合作</a>");
4 S/ Z2 z9 |( G+ u2 M</script >
; |4 u1 p, Z+ U: d+ N</td></tr> 6 y1 B: s, b: t* I
) i/ G P% F- Q2 ]7 v$ t
多个QQ,按以上规律复制上面的代码后修改online[0] 中的数字(第1个QQ为online[0]、第2个QQ为online[1]、第3个为online[2],以此类推)和QQ号(每组代码中有2处位置改为QQ号、2处位置改为昵称)。 2 Y; K+ A4 z7 p# Y; o1 _
( s+ |" w/ k% Q4 Y' Q<tr><td width="110"><img border=0 src=images/kefu_down.gif></td></tr> & C& @1 Y4 Y- Y! g8 D" v
</table>
2 s ~1 H! @7 p Y2 b" P! z</layer> & t7 v- W8 `8 x) R$ }6 L
<script type="text/javascript">
/ X1 x1 J& u4 B" b//Enter "frombottom" or "fromtop"
' O4 u V& Z5 p6 D! Wvar verticalpos="frombottom" ( Y7 y+ {: }! h* E7 j$ W8 S- }
if (!document.layers) . b2 h. J. t3 ^8 F
document.write('</div>')
^ ~* w/ m# @/ gfunction JSFX_FloatTopDiv() G& G+ p% N# l1 R* y1 Y7 O
{ ( p, I- m+ }! a1 A2 }: a& ]+ A# H
下面的var startX =3是水平位置,250是垂直位置;默认情况在屏幕左侧显示,若要改为右侧显示,修改3的值(var startX =3改为var startX =screen.width-150)即可。
2 x0 S: ^- v0 Q var startX =3, ( z2 b3 U# T0 l) f
startY = 250;
8 Z$ D1 g0 o/ |5 j `- B( | var ns = (navigator.appName.indexOf("Netscape") != -1); $ O1 D4 O% P+ l6 Q) c# ?
var d = document; ( o4 o9 W) M1 K% t; j/ F Q
function ml(id)
- y. O# |; ?/ @ {
8 W& o9 u6 `: H% _7 U3 C( ^ var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id]; ; _% ]8 z2 c( ~' e$ t
if(d.layers)el.style=el; 5 j) F, f1 x' H; V0 R% J
el.sP=function(x,y){this.style.left=x;this.style.top=y;};
. |- s% T. V6 ]/ t: L! g: p, O el.x = startX;
5 X2 y- a/ o, o7 ` if (verticalpos=="fromtop") , O$ m* G! ?7 f- m6 a
el.y = startY;
! P" o) _6 Z q: Q else{
# p8 x0 W0 N" ?" R$ o7 A el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight; % H7 A- E7 Z+ g( t
el.y -= startY;
8 U4 c* ^# P5 ?" C$ a- i7 h ? }
. j( O6 `+ y0 o/ b9 q6 N return el; ' r2 I6 `0 P7 Z
}
7 _; A7 u2 X4 [0 M4 D; Y( V# R* [ window.stayTopLeft=function()
) h8 a" }* w( m {
) l L2 b* M$ Q3 R% `% n+ ^1 F+ f if (verticalpos=="fromtop"){
% E( B5 Q$ ?% Y& i: i0 k var pY = ns ? pageYOffset : document.body.scrollTop; 8 d2 F6 w& o0 c
ftlObj.y += (pY + startY - ftlObj.y)/8;
# I5 i& X3 [! I( e }
+ c8 H0 c) R) W9 E( D else{
0 v1 O+ }8 Y4 v) V8 [+ }/ |5 Q. P4 Q) F var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
% \ K+ Q7 q3 q. n ftlObj.y += (pY - startY - ftlObj.y)/8; ' A! E4 X$ R7 A
}
+ g$ D8 w% O/ ~4 G ftlObj.sP(ftlObj.x, ftlObj.y);
7 R: Q E# ~/ m! m. j: B9 q% S setTimeout("stayTopLeft()", 10);
: ?* e4 L+ B4 B& @4 C8 ^ t# m } 8 Y4 a+ ?7 X5 b
ftlObj = ml("divStayTopLeft"); / {! v! s- V; O4 D
stayTopLeft();
8 W. X, g1 P! N4 P# y1 T; l} + A* t& R; x. A5 y, n! |
JSFX_FloatTopDiv();
2 r0 {) q- }( Y' Y7 |& e e</script> " _ X2 f3 L. o0 A _
</html>
$ k2 Q$ @0 k5 Z$ H第三步:下载相关素材(在图片上点右键-图片另存为…),保存到images目录下。
, E: A& e8 C. Zhttp://imis.qq.com/images/wpa/images/kefu_up.gif
2 O! y( ?4 L0 P( U8 ?& mhttp://imis.qq.com/images/wpa/images/ kefu_middle.gif 0 l2 w# d5 T. g' c+ k
http://imis.qq.com/images/wpa/images/ kefu_down.gif 6 y& |' ]) o6 A, d$ A
http://imis.qq.com/images/wpa/images/ QQonline.gif
1 \$ e1 e; I7 @http://imis.qq.com/images/wpa/images/ QQoffline.gif ) e: }8 j" I% i! h' j+ n) W1 L
http://imis.qq.com/css/im.css
( z3 ^) B1 U: ]( t* J! b" P第四步:将所有文件和目录保持原有结构(kefu.htm和文件夹images),拷贝到您的网站目录中,在你要添加“浮动QQ在线客服”的页面的最后面添加一行:<!--#include file="kefu.htm"--> |