用DW中ToolTip代码改进的提示框

网系我情

版主

Rank: 7 Rank: 7 Rank: 7

1^# 大中小发表于 2007-6-23 09:01 只看该作者

用DW中ToolTip代码改进的提示框

这个我早就改好了一直没有放上来.现在发给大家用用/ ]' ]2 l; ^3 v9 M
注意这几个变量它们影响到提示框的效果  " q! K. O! X  P" w" E, r+ _

var rT=true;//允许图像过渡
var bT=true;//允许图像淡入淡出
var tw=150;//提示框宽度& K, P/ Q) D2 T$ L8 _
var endaction=false;//结束动画. c$ R, p  j5 y* }. j0 T+ g3 q
  ) {% a# M) o2 Q7 `$ v

css控制动画效果  j( X  M. c* E  p) A

1 {! t3 j( ~: j* J+ Z/ y5 L; d2 m. T; z: e

1 ~2 p$ _2 A8 w. p7 o+ G9 N* E
只要把里面的'revealTrans(duration=.2,transition=1)'滤镜的transition值改变可以换动画过渡效果了.  c2 Q3 w9 G8 \# G8 r  Y
不说这么多了地球人都知道 revealTrans 和 blendtrans了吧

运行代码框
head3 \4 Z- z+ E8 o) y7 }

title图像效果演示/title1 ~6 B5 L, C% Z4 n2 z4 r5 A% H

meta http-equiv="Content-Type" content="text/html; charset=gb2312"
$ N9 [7 y7 @/ d5 b) z- E" P% c/ O
script% y" F+ j# |. j8 B& }2 }9 a

/*
  n: d+ R  m6 N2 ~
舜子制作1 q4 _/ X9 y2 N0 O3 m0 ~
, i; J4 X& [4 T' M! _% v
Made by PuterJam
6 \$ u2 D0 w! n, w' Y. K
*/

//--初始化变量--

var rT=true;//允许图像过渡
" `* y, b; C. d# b1 Q6 q1 a( i
var bT=true;//允许图像淡入淡出6 v- M* b0 D% c

var tw=150;//提示框宽度
4 c: T8 B& p# {; v
var endaction=false;//结束动画
! }+ V7 I" W, d8 M& d# ?) M

' @0 h  }1 J; i; G9 c
var ns4 = document.layers;, c- L- Y4 F5 e- O/ u& F. y# B
, f2 ~/ I2 W0 K1 q- Q! u
var ns6 = document.getElementById  !document.all;# n+ Q$ P; Z( x5 f
8 Q# U: `; n' X, N1 c3 b3 ^
var ie4 = document.all;2 c. g2 W, J4 n" O8 s4 @4 j

offsetX = 0;

offsetY = 20;# x- |$ O3 U$ p4 [4 H0 l0 N
; K9 A5 n5 o. R9 f( b
var toolTipSTYLE="";

function initToolTips()

{4 M3 z, ~5 X+ s9 h/ l
: F7 j5 S+ o& B0 S3 l* l2 p
  if(ns4||ns6||ie4)

  {

if(ns4) toolTipSTYLE = document.toolTipLayer;

else if(ns6) toolTipSTYLE = document.getElementById("toolTipLayer").style;
$ x4 o6 `3 ]) w" V% q) P1 q0 J
else if(ie4) toolTipSTYLE = document.all.toolTipLayer.style;! x) C( p, S5 b+ ]  j
, Q  I) b& X* D; c' z5 g
if(ns4) document.captureEvents(Event.MOUSEMOVE);8 _9 x, P/ S$ E7 L; F) ^
  w: Z( F$ o* N$ l9 o# f9 }: f
else

{

   toolTipSTYLE.visibility = "visible";
' O( C- d( w6 K9 g: Q9 }" Z0 X
   toolTipSTYLE.display = "none";
7 g7 S# H2 ~' n# h1 t. T: L
}

document.onmousemove = moveToMouseLoc;

  }& Z1 F& W' N" A9 E6 a+ v; W

}. K3 L3 p, e5 y, s4 R7 r  M9 n8 P
* k& T, w7 B1 [( E& W" Z4 |
function toolTip(msg, fg, bg)! ?& @' {3 w0 v- q% N1 D2 `7 N, s/ [8 B

{

  if(toolTip.arguments.length  1) // hide

  {/ c' H0 K1 l! e8 z* P1 x; W

if(ns4) % P: C4 Q; [9 A( T& h* h" F
& j" e5 g) z6 G
{

toolTipSTYLE.visibility = "hidden";9 {, ]/ j! A9 _) a: S' s7 o
7 w+ {0 ]4 U. n# C$ f' D. \* m" G" L
}) z0 z3 [% b1 I5 `/ ?$ G3 G+ u( b
0 P) t8 r+ x- p5 j
else ) {! B5 E7 ?. ], r
5 y+ J7 u) S, N1 _' A8 r) F. q! f
{
9 I& t9 J5 O+ l2 s6 k
   //--图象过渡，淡出处理--) s5 K4 ^2 M' _2 R
7 g, }2 ^  g% R, J
   if (!endaction) {toolTipSTYLE.display = "none";}: I1 Z+ V$ T6 _% R: L# [; s
( {+ l& t/ |" Q0 \& s8 g
   if (rT) document.all("msg1").filters[1].Apply();# j- g$ ~& ^3 W
9 R7 t! H/ d- Y" [7 }: f7 G7 V
   if (bT) document.all("msg1").filters[2].Apply();, a; d0 d; l1 ^
: ~: y2 R$ i% i- Z1 ]
   document.all("msg1").filters[0].opacity=0;& d2 Y$ C! H$ {

   if (rT) document.all("msg1").filters[1].Play();5 |' k/ |3 Y4 R; k
# C1 @/ S1 ^6 c7 f6 `
   if (bT) document.all("msg1").filters[2].Play();
6 A5 H2 J" s* c6 Z) q, v' F% D
   if (rT){ , X5 z+ [+ x- a4 v  m! P' u& h. c
$ y" P+ F8 U% V, I9 S
   if (document.all("msg1").filters[1].status==1 || document.all("msg1").filters[1].status==0){  & D, _2 j5 G, w! k" u
. N/ F2 }% ~0 I# L
   toolTipSTYLE.display = "none";}

   }
" _" j9 c4 s5 ^" \6 i! C. i% v
   if (bT){% I0 ~% G) g- h. l. @
9 j! e3 A+ i2 g3 D
   if (document.all("msg1").filters[2].status==1 || document.all("msg1").filters[2].status==0){  4 o" s3 a  I' U7 G1 H

   toolTipSTYLE.display = "none";}
7 D+ v" f9 A6 O2 Q7 d- v
   }
6 r) U  ]( {* [
   if (!rT  !bT) toolTipSTYLE.display = "none";9 _: ~% J% K0 ?& @' H% f5 s% L4 W3 H
8 o% {) `7 G7 K% R7 B
   //----------------------
8 t4 B! k; U8 h+ ^
}8 p4 o  {  H# ~
( h3 B" R, w0 g; J
  }
) d5 m: G" g% a. H7 Y- Y3 y: o
  else // show- M7 b4 h: z* t
' V; H) j  W$ R' e8 W" z
  {" G6 i6 M+ k$ r8 y

if(!fg) fg = "#777777";

if(!bg) bg = "#eeeeee";

var content =

'table id="msg1" name="msg1" border="0" cellspacing="0" cellpadding="1" bgcolor="' fg '" class="trans_msg"td'
0 o8 s" v. ?; p7 Z! h
'table border="0" cellspacing="0" cellpadding="3" bgcolor="' bg
/ B1 I  o5 e* x
'"td width=' tw 'font face="Arial" color="' fg  ' v, D6 N" |) L8 K9 R

'" size="-2"' msg
- v2 @- U- F! O
'\;/font/td/table/td/table';  M8 ^, Q; }  h1 b0 i

% P( K) J1 P. P9 [% e9 W6 o8 B
6 Y1 c: l4 t7 N5 a! w
if(ns4)9 Y' x* m7 [# T3 d- B

{

   toolTipSTYLE.document.write(content);
9 n: G) b9 |6 G5 b! R8 u; m/ F
   toolTipSTYLE.document.close();* \% \9 g( x: b# x( P

   toolTipSTYLE.visibility = "visible";" h# [6 f; }6 m2 [/ u$ F) B, z; F

}" j1 N* t, S" _. R! K5 ?" U

if(ns6)9 L. `9 I% b4 o' J
7 f" @1 x& H4 |/ E: k
{/ V; {$ U; M8 `6 u9 X: y
3 a% j7 K! @  p$ Y
   document.getElementById("toolTipLayer").innerHTML = content;) ?3 [- x% D/ [3 x
* X; k5 M" J6 r% ?: `
   toolTipSTYLE.display='block'9 y; e; D4 w0 ^, Q% `# C* H. l

}1 d; n& P& o7 ~# q. S' Z# u
/ {' V& U6 y: z! I, I
if(ie4)( X" s# ^9 Z5 Q. @

{

   document.all("toolTipLayer").innerHTML=content;

   toolTipSTYLE.display='block'
* s6 b1 W" l4 l4 ]" V
   //--图象过渡，淡入处理--) A; m  d7 O' N  u
2 i1 \, j/ P5 m, ~( F( D" p) @
   var cssopaction=document.all("msg1").filters[0].opacity5 g4 H: }' \( x
7 B, P% B7 D% d# b5 N7 D" i
   document.all("msg1").filters[0].opacity=0;
* u# X+ ~) w  r4 x
   if (rT) document.all("msg1").filters[1].Apply();

   if (bT) document.all("msg1").filters[2].Apply();2 ]/ B  k* [' t

   document.all("msg1").filters[0].opacity=cssopaction;
" e& ~& Y0 D6 i( d4 a5 I* O; [
   if (rT) document.all("msg1").filters[1].Play();$ W, o$ p0 `# \3 i4 j: s# F
" I- ^; z4 q% P1 t  S# w% H0 y# g$ c
   if (bT) document.all("msg1").filters[2].Play();

   //----------------------5 q7 T0 x. f" d) j
# v8 a- }6 T% v2 j( c
}) j  O; `  i5 {- c

  }

}- P! S3 {( W1 t& k+ A$ L
: p/ h+ F/ w6 p3 X6 p7 x
function moveToMouseLoc(e)

{1 D/ y# t3 g* \5 [% F) ]& N" ?6 N

  if(ns4||ns6)
; X$ }' e: c( w! ~# ~9 u, f/ x
  {

x = e.pageX;3 j5 m, w( M3 n: v) v; p

y = e.pageY;3 ^# S% p# {0 t3 D2 d) A

  }1 w$ x( k* p5 O8 M
2 Y, f3 Y1 g) i4 f, l
  else
& ?1 G# u2 f, {3 S) }& j' U
  {

x = event.x document.body.scrollLeft;: y# O6 [  Q: F: w; V
* w5 i9 S" t7 f+ b% f& F
y = event.y document.body.scrollTop;# K' S% e/ _5 p7 Y0 u
3 `: F8 h: E' x) o$ @+ B& u+ _* _
  }
# g0 C9 }3 b: X* ^, Z6 F: S
  toolTipSTYLE.left = x offsetX;# J6 @) i" s2 {; m- `" R
, }" M0 |# f7 Q% \
  toolTipSTYLE.top = y offsetY;
- @, H# i1 k9 n2 T
  return true;& i. z. T  r1 \$ E* ?( f

}

, K% |& g' j7 o& u5 c5 g  N
1 C+ g1 a3 P+ {
/script
' L9 ], s: @$ P' y( D: t" \! i
style  type="text/css"
8 N2 ~) o, n3 b) ^! X
!--

.trans_msg4 a' I: `) G& @0 m1 [% x4 s$ ]

{, e" u* z. U6 q0 V4 a
6 E& a5 D2 V( T" u/ D2 ]
filter:alpha(opacity=100,enabled=1) revealTrans(duration=.2,transition=1) blendtrans(duration=.2);

}7 p: D& N( [: r: W

--' P1 g; X; H) w! I# F3 C. A
% |6 g5 [: B1 z$ B! m
/style# X6 ?$ |' k0 X: P( E2 `
' |; }8 t  h! Y6 C$ A/ P
/head) Z6 i8 t& R. }' b. D3 D  W  S

script3 o$ B4 v! i/ x6 u: v; }

/script
9 l: J! u  O/ V% P! {
body
$ W4 }1 z% D& \# Q# L. X  y3 D9 D
div id="toolTipLayer" style="position:absolute; visibility: hidden"/div" n# T# v4 [1 b& `8 z0 p; T

scriptinitToolTips()/script

: x) a: X) w. d2 ?5 [
0 A* x( ^: @9 c" P6 l0 p) ~) U% r' v

font face="Arial"
5 F- E$ s" v* {0 Y, r
a href="#"  onMouseOut="toolTip()"test/a/font$ d) ]7 c2 ?6 Q5 H3 ~( L( C2 }7 ?, X
# I7 @3 r. Z- o! M  I+ T5 j
font face="Arial"- {% {5 p( D1 z5 d( s0 h

a href="#"  onMouseOut="toolTip()"test/a/font

font face="Arial"
5 j  C5 X. K# W- D
a href="#"  onMouseOut="toolTip()"test/a/font

font face="Arial"& e! o+ U8 n. x; M& _
( Q' g" X2 ~  [% C8 P
a href="#"  onMouseOut="toolTip()"test/a/font
) V, a! v# G5 V% B! b
/body
[Ctrl A 全部选择提示：你可先修改部分代码，再按运行] ; C. |; E7 O6 K* @  |  N+ H. C+ l

讨论请到这里：http://www.blueidea.com/bbs/newsdetail.asp?id=1517086

点击图标进入精品网摘收藏欢迎大家加入网络收藏夹

TOP

‹‹ 上一主题 | 下一主题 ››