KiMoGiGi 技术文集

  1 < html >
  2 < head >
  3 < title > 图像效果演示 </ title >
  4 < meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312" >
  5 < script >
  6 /**/ /*
  7 舜子制作
  8 Made by PuterJam
  9 */
 10 // --初始化变量--
 11 var  rT = true ; // 允许图像过渡
 12 var  bT = true ; // 允许图像淡入淡出
 13 var  tw = 150 ; // 提示框宽度
 14 var  endaction = false ; // 结束动画
 15
 16 var  ns4  =  document.layers;
 17 var  ns6  =  document.getElementById  &&   ! document.all;
 18 var  ie4  =  document.all;
 19 offsetX  =   0 ;
 20 offsetY  =   20 ;
 21 var  toolTipSTYLE = "" ;
 22 function  initToolTips()
 23 {
 24    if (ns4 || ns6 || ie4)
 25    {
 26      if (ns4) toolTipSTYLE  =  document.toolTipLayer;
 27      else   if (ns6) toolTipSTYLE  =  document.getElementById( " toolTipLayer " ).style;
 28      else   if (ie4) toolTipSTYLE  =  document.all.toolTipLayer.style;
 29      if (ns4) document.captureEvents(Event.MOUSEMOVE);
 30      else
 31      {
 32       toolTipSTYLE.visibility  =   " visible " ;
 33       toolTipSTYLE.display  =   " none " ;
 34     }
 35     document.onmousemove  =  moveToMouseLoc;
 36   }
 37 }
 38 function  toolTip(msg, fg, bg)
 39 {
 40    if (toolTip.arguments.length  <   1 )  //  hide
 41    {
 42      if (ns4) 
 43      {
 44     toolTipSTYLE.visibility  =   " hidden " ;
 45     }
 46      else  
 47      {
 48        // --图象过渡，淡出处理--
 49        if  ( ! endaction)  {toolTipSTYLE.display  =   " none " ;}
 50        if  (rT) document.all( " msg1 " ).filters[ 1 ].Apply();
 51        if  (bT) document.all( " msg1 " ).filters[ 2 ].Apply();
 52       document.all( " msg1 " ).filters[ 0 ].opacity = 0 ;
 53        if  (rT) document.all( " msg1 " ).filters[ 1 ].Play();
 54        if  (bT) document.all( " msg1 " ).filters[ 2 ].Play();
 55        if  (rT) { 
 56        if  (document.all( " msg1 " ).filters[ 1 ].status == 1   ||  document.all( " msg1 " ).filters[ 1 ].status == 0 ) {  
 57       toolTipSTYLE.display  =   " none " ;}
 58       }
 59        if  (bT) {
 60        if  (document.all( " msg1 " ).filters[ 2 ].status == 1   ||  document.all( " msg1 " ).filters[ 2 ].status == 0 ) {  
 61       toolTipSTYLE.display  =   " none " ;}
 62       }
 63        if  ( ! rT  &&   ! bT) toolTipSTYLE.display  =   " none " ;
 64        // ----------------------
 65     }
 66   }
 67    else   //  show
 68    {
 69      if ( ! fg) fg  =   " #777777 " ;
 70      if ( ! bg) bg  =   " #eeeeee " ;
 71      var  content  =
 72     ' < table id = " msg1 "  name = " msg1 "  border = " 0 "  cellspacing = " 0 "  cellpadding = " 1 "  bgcolor = " ' + fg + ' "  class = " trans_msg " >< td > '  +
 73     ' < table border = " 0 "  cellspacing = " 0 "  cellpadding = " 3 "  bgcolor = " ' + bg + 
 74     ' " >< td width = '  +  tw  +  ' >< font face = " Arial "  color = " ' + fg +
 75     ' "  size = " -2 " > '  +  msg  +
 76     ' & nbsp\; </ font ></ td ></ table ></ td ></ table > ';
 77
 78      if (ns4)
 79      {
 80       toolTipSTYLE.document.write(content);
 81       toolTipSTYLE.document.close();
 82       toolTipSTYLE.visibility  =   " visible " ;
 83     }
 84      if (ns6)
 85      {
 86       document.getElementById( " toolTipLayer " ).innerHTML  =  content;
 87       toolTipSTYLE.display = 'block'
 88     }
 89      if (ie4)
 90      {
 91       document.all( " toolTipLayer " ).innerHTML = content;
 92       toolTipSTYLE.display = 'block'
 93        // --图象过渡，淡入处理--
 94        var  cssopaction = document.all( " msg1 " ).filters[ 0 ].opacity
 95       document.all( " msg1 " ).filters[ 0 ].opacity = 0 ;
 96        if  (rT) document.all( " msg1 " ).filters[ 1 ].Apply();
 97        if  (bT) document.all( " msg1 " ).filters[ 2 ].Apply();
 98       document.all( " msg1 " ).filters[ 0 ].opacity = cssopaction;
 99        if  (rT) document.all( " msg1 " ).filters[ 1 ].Play();
100        if  (bT) document.all( " msg1 " ).filters[ 2 ].Play();
101        // ----------------------
102     }
103   }
104 }
105 function  moveToMouseLoc(e)
106 {
107    if (ns4 || ns6)
108    {
109     x  =  e.pageX;
110     y  =  e.pageY;
111   }
112    else
113    {
114     x  =  event.x  +  document.body.scrollLeft;
115     y  =  event.y  +  document.body.scrollTop;
116   }
117   toolTipSTYLE.left  =  x  +  offsetX;
118   toolTipSTYLE.top  =  y  +  offsetY;
119    return   true ;
120 }
121
122 </ script >
123 < style   type ="text/css" >
124 <!--
125 .trans_msg
126      {} {
127     filter : alpha(opacity=100,enabled=1) revealTrans(duration=.2,transition=1) blendtrans(duration=.2) ;
128      }
129 -->
130 </ style >
131 </ head >
132 < script >
133 </ script >
134 < body >
135 < div  id ="toolTipLayer"  style ="position:absolute; visibility: hidden" ></ div >
136 < script > initToolTips() </ script >
137
138
139 < font  face ="Arial" >
140 < a  href ="#"  onMouseOver ="toolTip('这是个好东东<br>你说呢<br>哈哈')"  onMouseOut ="toolTip()" > test </ a ></ font >
141 < font  face ="Arial" >
142 < a  href ="#"  onMouseOver ="toolTip('你要吗，好好用的哦真的', '#FFFF00', 'red')"  onMouseOut ="toolTip()" > test </ a ></ font >
143 < font  face ="Arial" >
144 < a  href ="#"  onMouseOver ="toolTip('这是个好东东<br>你说呢<br>哈哈', '#FFFF00', 'orange')"  onMouseOut ="toolTip()" > test </ a ></ font >
145 < font  face ="Arial" >
146 < a  href ="#"  onMouseOver ="toolTip('<marquee>跑啊!!跑</marquee>', '#FFFF00', 'orange')"  onMouseOut ="toolTip()" > test </ a ></ font >
147 </ body >
148
149 </ html >
150