|
浮动QQ在线客服&网站QQ在线咨询 # V9 G3 D: E1 {2 C1 w7 k8 } b* e
第一步:先把以下代码保存为kefu.htm 6 w( [3 j, S, Y" `9 e
第二步:按橙色说明修改
7 Z2 `' ~; r% }绿色部分是要修改的内容,html文档中不包括说明文字:
7 s- s9 l3 c/ H- }/ H4 R4 x<html>
# `8 R6 h+ t, @. j; }) b; B<head>
5 A4 j: T; V9 l' ~& A a<meta http-equiv="Content-Type" c>
$ P, i1 v' ]- H<link rel="stylesheet" href="images/ im.css" type="text/css">
! o( f' x$ ~3 o& \! \( T</head> # M- t% ^$ s6 Q1 b
<script>
8 m+ S8 t2 _$ ^) kvar online= new Array(); 1 S+ M- }4 O7 j
if (!document.layers)
4 S+ I9 r( z0 A; u4 @$ U# B- j* ^document.write('<div id="divStayTopLeft" style="position:absolute">')
/ `- k9 x) n( C: w7 u5 y</script>
7 B+ W2 G8 N+ H( z6 n<layer id="divStayTopLeft">
# _7 ~' P9 P' G$ g: v. x<table border="0" width="110" cellspacing="0" cellpadding="0"> 2 j6 r* {1 g1 f. W
<tr><td width="110"><img border=0 src=images/kefu_up.gif></td></tr>
4 o0 {* O) e6 r, K1 O+ B6 k8 _! K<script src="http://webpresence.qq.com/getonline?Type=1&27089965:27043921:56129874:"></script> 1 J+ L. n9 ^; _- e, }( e
将绿色部分修改成你的所有客服QQ,多个QQ用半角冒号隔开,最后一个QQ号后面也必须以半角冒号结束
0 i7 a) V% n8 O! r# { O/ P
5 Z' p8 j; G: f" a. x( k( s3 s- N以下部分显示第1个客服QQ,注意:online[0] 9 B" f4 W/ m/ ?. ?$ J0 `- ]
<tr><td valign=middle background=images/kefu_middle.gif> I# p: |5 u4 _: q1 n
<script> 8 b) w0 j7 O6 R, D3 p
if (online[0]==0)
$ z: @- I+ I% I0 r+ sdocument.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" F! i+ }/ u' m4 e3 {9 Q
else
0 G/ v# A! b: L1 c$ pdocument.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 ^ B5 L5 {5 b q7 p/ o) X</script > 4 d6 g+ i) \7 p& P; G7 o
</td></tr> ' ?7 c3 }7 D- {9 ?- Y. ^. }' z# O0 X7 i
t2 X% J) L0 n+ }$ V4 e+ E
以下部分显示第2个客服QQ,注意:online[1] : I e2 u0 g0 o$ x
<tr><td valign=middle background=images/kefu_middle.gif>
1 C7 s' b0 |# x<script> 5 R% v, `* {" z* h- A
if (online[1]==0) ( a0 z1 L) v7 v: A" s5 K( o. f
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>");
% m; j( I0 n; i& j! `% pelse " P% a3 v* p: ^9 L
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>");
) _$ k1 \. M, l1 n</script > ) @# m! t9 J5 c( S' K/ ^" z
</td></tr> : ^- t. ]; R& f* _* y- E+ ?' X; r* r
# G7 V- K3 `& |7 @' H7 j; h, G1 K以下部分显示第3个客服QQ,注意:online[2]。 4 |+ _5 ^+ g$ X, p
<tr><td valign=middle background=images/kefu_middle.gif> ' n2 F6 |7 Z* P! D' H) k
<script> 8 A3 b8 a% N' D# H/ G8 d
if (online[2]==0) z' n) F2 C( J/ z! ^
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=240434782&Site=在线咨询&Menu=no' title='客服不在线,请留言'>代理合作</a>"); 7 L: q; q4 e' t5 l/ K
else ! A" a3 K& S1 z( 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>"); 6 R6 A# v2 B8 U& _1 A! W/ {
</script >
9 o5 ]3 s2 R- t# z( G' x9 ~9 \# J5 }</td></tr>
( P _+ p( M3 e! s
5 d' @3 x: c8 N" |多个QQ,按以上规律复制上面的代码后修改online[0] 中的数字(第1个QQ为online[0]、第2个QQ为online[1]、第3个为online[2],以此类推)和QQ号(每组代码中有2处位置改为QQ号、2处位置改为昵称)。
1 l. m0 Q5 k8 ~3 G3 B# M M ; Z; J n" a$ z2 c
<tr><td width="110"><img border=0 src=images/kefu_down.gif></td></tr>
4 ?8 v5 O9 M: b</table> , M+ ^* H# V, c9 R* q
</layer>
# W! h, P8 @9 [) c: V<script type="text/javascript">
+ e! G; q, V5 D* S0 L5 U _% R//Enter "frombottom" or "fromtop" / z4 _" H: ~7 X7 @ Z& j4 n
var verticalpos="frombottom"
( w$ y# B2 l% Yif (!document.layers) ( `# Y* [/ ?9 g* j5 I
document.write('</div>')
; J8 `- J& [0 {8 S+ [function JSFX_FloatTopDiv() 4 ^7 z& `( P' K% j/ M4 x
{ # m: M5 V, p; k: f: B6 e0 I
下面的var startX =3是水平位置,250是垂直位置;默认情况在屏幕左侧显示,若要改为右侧显示,修改3的值(var startX =3改为var startX =screen.width-150)即可。
6 n, n: c* b% q var startX =3,
7 j7 w/ v+ n# K5 l startY = 250;
$ m$ G* ^9 O. ], \- Q$ t var ns = (navigator.appName.indexOf("Netscape") != -1);
4 l: X, d' m1 ]8 l7 f var d = document; 8 c. V l! q' A# b& ?, x2 k
function ml(id) + u$ F. k+ G! R
{ # w+ o0 U8 ^/ ~+ R$ f, [: E
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id]; 9 \. m: P; _. t$ `5 l+ y( H
if(d.layers)el.style=el; 4 B. [ V+ H% |0 `
el.sP=function(x,y){this.style.left=x;this.style.top=y;}; ; e m# o) |: S( n
el.x = startX; 0 w) j7 ?9 p% ]- }- _9 x6 Q
if (verticalpos=="fromtop") % e5 o3 O9 T, Q, y& K5 ?: g! [
el.y = startY; 2 ~/ ]3 B. p1 f' b. r! l; s
else{ . M4 ? @7 m% _2 z$ n0 t
el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight; 5 ] v- {' b8 e( \
el.y -= startY;
2 C0 B0 k( d6 j$ K @ } $ X# [9 }5 }' V( e, }
return el; 8 k0 N8 _0 U7 `
}
2 R2 g' P5 z! P' v# c4 `$ h* l( x window.stayTopLeft=function() 2 K) ]$ o, \9 T( E
{
2 l- |+ n+ r; u+ d1 @) } if (verticalpos=="fromtop"){ , h* m0 B' m+ [0 e& E% y8 n
var pY = ns ? pageYOffset : document.body.scrollTop; ) j2 h1 i/ O, N/ |5 f% q
ftlObj.y += (pY + startY - ftlObj.y)/8; + r& R1 o E0 L3 @. }: y$ f
}
; \% T; ?: K3 ?0 L. r. S% } else{
/ A1 _) H6 X' E% B9 k# i. o! e var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight; . \2 A$ B: A8 E
ftlObj.y += (pY - startY - ftlObj.y)/8;
6 R% E& j$ n# g% O2 T8 \5 N: I }
1 i- l+ U# n% a" I8 f, b ftlObj.sP(ftlObj.x, ftlObj.y); ; Q% V/ c; R* g; U0 h0 v7 F9 {
setTimeout("stayTopLeft()", 10);
0 A& [* p4 M# s$ m }
! }, z0 ]# u$ j j3 h ftlObj = ml("divStayTopLeft"); , C% B0 D9 C' b/ h
stayTopLeft();
2 A' t( X4 j' v} ) D" o+ p; g7 ?0 y2 c( l, W
JSFX_FloatTopDiv();
2 S; [6 n- n% ?- [/ Z# `/ S</script>
% F0 r4 b. ^& |: u4 b @</html> 9 ]% H: c& w) N( v% r1 e2 e
第三步:下载相关素材(在图片上点右键-图片另存为…),保存到images目录下。
# n, m5 H! M3 W: dhttp://imis.qq.com/images/wpa/images/kefu_up.gif ! k$ s! ]8 M. \3 Y" x' P6 n
http://imis.qq.com/images/wpa/images/ kefu_middle.gif 7 i. ]" Y2 z$ l( W
http://imis.qq.com/images/wpa/images/ kefu_down.gif + Y3 A# b5 D9 u$ b' M2 P) f
http://imis.qq.com/images/wpa/images/ QQonline.gif
$ V" k( O; }" D" b6 S8 chttp://imis.qq.com/images/wpa/images/ QQoffline.gif ; h$ N! u3 |3 N& I3 ?
http://imis.qq.com/css/im.css - Y" U# I/ s) m! q6 Z9 j3 a: L: C6 J! {
第四步:将所有文件和目录保持原有结构(kefu.htm和文件夹images),拷贝到您的网站目录中,在你要添加“浮动QQ在线客服”的页面的最后面添加一行:<!--#include file="kefu.htm"--> |