|
浮动QQ在线客服&网站QQ在线咨询 % B/ p2 A8 O, w) N0 [& W
第一步:先把以下代码保存为kefu.htm
+ z+ p' p7 u* Y( g* R J( U第二步:按橙色说明修改 , S' ^- h2 @9 g# p* O
绿色部分是要修改的内容,html文档中不包括说明文字:
5 R( O t& j0 }- ]9 g. n) E<html> ( k& |, Z7 k3 u& `' b% v
<head>
% b. t8 r0 m9 K( U1 m+ p<meta http-equiv="Content-Type" c>
4 i- i( c& x y3 o8 u<link rel="stylesheet" href="images/ im.css" type="text/css">
7 O1 F' `7 k' S2 j; H</head>
/ V4 D w% O+ j6 k( H! K<script> . V! E: n6 |- g# N
var online= new Array();
+ e, ^+ v# \2 w& `; ]if (!document.layers) ; |# X' ~ _9 k; @& C6 x$ U
document.write('<div id="divStayTopLeft" style="position:absolute">') 0 I' @4 a4 d" f; |
</script>
+ m7 @5 x" H6 J3 J1 ~<layer id="divStayTopLeft"> " n1 @) ?4 w( T' ^. l: E# C. W
<table border="0" width="110" cellspacing="0" cellpadding="0"> 7 R7 X! O6 L- E- K
<tr><td width="110"><img border=0 src=images/kefu_up.gif></td></tr> # w! E; }" t9 x+ g7 j/ @
<script src="http://webpresence.qq.com/getonline?Type=1&27089965:27043921:56129874:"></script>
) I% ~- h: ~0 j- y+ ?/ E( N3 c. L! F将绿色部分修改成你的所有客服QQ,多个QQ用半角冒号隔开,最后一个QQ号后面也必须以半角冒号结束 2 h8 w4 F: E/ {; P
. r0 i+ d- f+ {+ {
以下部分显示第1个客服QQ,注意:online[0] 9 x" }& g4 x/ ~( k
<tr><td valign=middle background=images/kefu_middle.gif> " C: s+ D- G0 w! k; t: {
<script>
+ f6 Q" C7 B9 [0 `: [. Uif (online[0]==0)
, j& g5 \# P* K3 j1 B) ^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>"); + S& ]3 {) `+ U, d' C
else 9 T B5 |. h, u; ~' 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=27089965&Site=在线咨询&Menu=no' title='在线即时交谈'>售前咨询</a>"); 9 _2 W- F5 u& G9 y, X
</script > - P$ O' K! O. L- g5 ?, _
</td></tr> # V( \1 q# ], G
, }5 U# [3 B F1 \! t) x2 p: X
以下部分显示第2个客服QQ,注意:online[1]
4 c m! q: `8 a: }2 S1 B' Z% i1 e<tr><td valign=middle background=images/kefu_middle.gif>
) @% a6 r" D) l1 I& J3 ?8 Q<script> * j1 s) C: g p" `
if (online[1]==0) ) L/ ~; ^9 q! P+ ~ @$ 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=27043921&Site=在线咨询&Menu=no' title='客服不在线,请留言'>技术支持</a>");
* z3 B% u: [& I% p3 z4 F! u' belse
: V, F# Y6 [8 x* F4 \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>");
( S5 K* M) n( B</script > * o; D! p7 k, R+ w* R* o
</td></tr>
% J4 c/ `. B1 x* v9 h
7 [2 Q5 e6 Y- M, v# _* H以下部分显示第3个客服QQ,注意:online[2]。
& j; w: V' K; m9 E; [, V<tr><td valign=middle background=images/kefu_middle.gif>
% z) {( o0 z' H* P5 v<script> * n2 H! W1 M: {! b* k8 a
if (online[2]==0)
9 P+ K" ~! I2 z* [" _5 y+ H+ i. Gdocument.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>");
; `2 Q( e8 B1 N! |0 ~% \else
2 M/ B9 |; W3 Z X) X1 qdocument.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>"); % T- A8 {5 _* Z& ?8 y! T! R
</script > 5 O1 i' [" q, W' }5 f [; f& X
</td></tr>
, X1 v! @& J5 @) M/ ?3 ~ ; l* Z. Q( x7 s' {3 v+ [7 N4 `
多个QQ,按以上规律复制上面的代码后修改online[0] 中的数字(第1个QQ为online[0]、第2个QQ为online[1]、第3个为online[2],以此类推)和QQ号(每组代码中有2处位置改为QQ号、2处位置改为昵称)。
$ P2 d. h1 |0 [
/ S( x, X2 L' q& `- b<tr><td width="110"><img border=0 src=images/kefu_down.gif></td></tr> - @4 r1 S( t' h& _& z9 ?; S t3 }
</table>
1 C/ y7 I% Y1 G! U2 b/ f9 T</layer> 2 _' P4 l+ {- ?# R$ ?
<script type="text/javascript">
' h+ H6 s7 e/ j+ @9 W# S7 H//Enter "frombottom" or "fromtop"
?! K' J+ l @$ ^# |: J* ovar verticalpos="frombottom"
8 `2 z4 ^9 e2 r2 j7 tif (!document.layers)
" p# O h) }6 ?: W& a9 n. Tdocument.write('</div>')
) T; l) o8 ~; C k1 |function JSFX_FloatTopDiv()
8 u% K9 X+ ?. X{
! A% Y" h1 ?/ |, D' I; I5 a5 Z下面的var startX =3是水平位置,250是垂直位置;默认情况在屏幕左侧显示,若要改为右侧显示,修改3的值(var startX =3改为var startX =screen.width-150)即可。
+ p/ W& `- C0 Z( R7 ]' y) R9 t var startX =3,
' ^3 ^9 R2 ~3 Y* M7 Z" x8 B startY = 250; 3 r1 G, T7 ]( t, S
var ns = (navigator.appName.indexOf("Netscape") != -1);
. y; H' Y3 _# \9 | r) o var d = document;
1 r. S8 w& c4 Y/ D& s7 F1 r1 }" f5 M function ml(id)
: X- t; h! }" z* y H1 O x" G# K7 }- F { d. h+ G' e8 |& S6 T7 M8 s
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id]; / R2 v! X v6 G* M6 R# F
if(d.layers)el.style=el;
6 G+ C8 _0 l( {; E$ `, t el.sP=function(x,y){this.style.left=x;this.style.top=y;}; ( _) F; t; B! p5 Q. n
el.x = startX; 1 ^1 j, ]5 ?. y/ d+ s1 _
if (verticalpos=="fromtop")
4 B. f, m4 B: N) n+ p2 W7 R' P el.y = startY; / P' R1 x! j" x) [ J& d/ Q) f
else{ # t! A* y! u1 u, V6 N. Q: \
el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight; 7 R1 F" f0 U$ y W* h' u0 N* v
el.y -= startY;
# _0 [. ?' ]" U& a5 a, k1 f2 ?3 q } 8 J0 U6 C& x7 w4 Z* O# C0 |. L
return el;
, s& L+ K M8 y- {4 i } ; e9 A' P# e2 o3 W
window.stayTopLeft=function() / J; n _" E* v6 @- f" [# ~1 }
{ # r9 y8 W' e; E Y8 }- ^
if (verticalpos=="fromtop"){
" G5 q/ P# y* B( ~3 g var pY = ns ? pageYOffset : document.body.scrollTop; & e" g" x/ \6 k# K" a6 R9 d
ftlObj.y += (pY + startY - ftlObj.y)/8; I9 \0 O8 g' g* w
} / n0 W% l" _* b
else{ $ S" R4 h8 [; _+ e: T, O) M$ u
var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight; * D8 u! \/ n7 H9 O; }6 n
ftlObj.y += (pY - startY - ftlObj.y)/8;
6 d2 ?, W. ~2 _: ~! y } 0 q) B( U/ }8 x) I
ftlObj.sP(ftlObj.x, ftlObj.y);
u; ?, U% ^9 x O Q setTimeout("stayTopLeft()", 10);
( y* v0 k5 @9 h3 @, e$ U& u }
7 r( v0 s* W1 p U. ^3 o) n3 U ftlObj = ml("divStayTopLeft");
" {1 {8 Q. s/ D" D) \1 D. \ stayTopLeft();
( \& ~3 ^1 s: o. J. C} 3 a. X# F8 O F. s8 G! a* B% G5 W% g
JSFX_FloatTopDiv();
; T! r2 R; l% P' |8 Q C8 h4 V</script>
2 f" `8 G4 m* W! @ C</html>
( U) z& G" m& t2 a( B第三步:下载相关素材(在图片上点右键-图片另存为…),保存到images目录下。
% S: D" J2 {0 r$ @2 S7 D. V( Thttp://imis.qq.com/images/wpa/images/kefu_up.gif
% v! e% H( `; B( lhttp://imis.qq.com/images/wpa/images/ kefu_middle.gif
7 w T) i; y3 U4 Thttp://imis.qq.com/images/wpa/images/ kefu_down.gif . s4 L9 r) M: m0 I1 A5 z2 r
http://imis.qq.com/images/wpa/images/ QQonline.gif ! l% l r) Z5 V) G
http://imis.qq.com/images/wpa/images/ QQoffline.gif . {( q; u$ J) O: h$ b5 B
http://imis.qq.com/css/im.css , C( B1 V3 v1 O' U9 y! ^; \) J
第四步:将所有文件和目录保持原有结构(kefu.htm和文件夹images),拷贝到您的网站目录中,在你要添加“浮动QQ在线客服”的页面的最后面添加一行:<!--#include file="kefu.htm"--> |