ToolTip.js 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. function getViewportHeight() {
  2. if (window.innerHeight!=window.undefined) return window.innerHeight;
  3. if (document.compatMode=='CSS1Compat') return document.documentElement.clientHeight;
  4. if (document.body) return document.body.clientHeight;
  5. return window.undefined;
  6. }
  7. function getViewportWidth() {
  8. if (window.innerWidth!=window.undefined) return window.innerWidth;
  9. if (document.compatMode=='CSS1Compat') return document.documentElement.clientWidth;
  10. if (document.body) return document.body.clientWidth;
  11. return window.undefined;
  12. }
  13. /**
  14. * Gets the real scroll top
  15. */
  16. function getScrollTop() {
  17. if (self.pageYOffset) // all except Explorer
  18. {
  19. return self.pageYOffset;
  20. }
  21. else if (document.documentElement && document.documentElement.scrollTop)
  22. // Explorer 6 Strict
  23. {
  24. return document.documentElement.scrollTop;
  25. }
  26. else if (document.body) // all other Explorers
  27. {
  28. return document.body.scrollTop;
  29. }
  30. }
  31. function getScrollLeft() {
  32. if (self.pageXOffset) // all except Explorer
  33. {
  34. return self.pageXOffset;
  35. }
  36. else if (document.documentElement && document.documentElement.scrollLeft)
  37. // Explorer 6 Strict
  38. {
  39. return document.documentElement.scrollLeft;
  40. }
  41. else if (document.body) // all other Explorers
  42. {
  43. return document.body.scrollLeft;
  44. }
  45. }
  46. /*
  47. 渐变的弹出图片
  48. 使用方法:
  49. 将ToolTip.js包含在网页body的结束标签后
  50. 调用方法:
  51. <a href="pages.jpg" target='_blank' onMouseOver="toolTip('<img src=http://zhouzh:90/templet/T_yestem_channel/pages_small.jpg>')" onMouseOut="toolTip()"><img src='pages_small.jpg' border=0 width=30 height=20 align="absmiddle" title="点击看大图"></a>
  52. 必须CSS样式
  53. .trans_msg
  54. {
  55. filter:alpha(opacity=100,enabled=1) revealTrans(duration=.2,transition=1) blendtrans(duration=.2);
  56. }
  57. */
  58. //--初始化变量--
  59. var rT=true;//允许图像过渡
  60. var bT=true;//允许图像淡入淡出
  61. var tw=150;//提示框宽度
  62. var endaction=false;//结束动画
  63. var ns4 = document.layers;
  64. var ns6 = document.getElementById && !document.all;
  65. var ie4 = document.all;
  66. offsetX = 10;
  67. offsetY = 20;
  68. var toolTipSTYLE="";
  69. function initToolTips()
  70. {
  71. tempDiv = document.createElement("div");
  72. tempDiv.id = "toolTipLayer";
  73. tempDiv.style.position = "absolute";
  74. tempDiv.style.zIndex = "999";
  75. tempDiv.style.display = "none";
  76. document.body.appendChild(tempDiv);
  77. if(ns4||ns6||ie4)
  78. {
  79. if(ns4) toolTipSTYLE = document.toolTipLayer;
  80. else if(ns6) toolTipSTYLE = document.getElementById("toolTipLayer").style;
  81. else if(ie4) toolTipSTYLE = document.all.toolTipLayer.style;
  82. if(ns4) document.captureEvents(Event.MOUSEMOVE);
  83. else
  84. {
  85. toolTipSTYLE.visibility = "visible";
  86. toolTipSTYLE.display = "none";
  87. }
  88. document.onmousemove = moveToMouseLoc;
  89. }
  90. }
  91. function toolTip(msg, fg, bg)
  92. {
  93. try {
  94. if(toolTip.arguments.length < 1) // hide
  95. {
  96. if(ns4)
  97. {
  98. toolTipSTYLE.visibility = "hidden";
  99. }
  100. else
  101. {
  102. //--图象过渡,淡出处理--
  103. if (!endaction) {toolTipSTYLE.display = "none";}
  104. if (rT) document.all("msg1").filters[1].Apply();
  105. if (bT) document.all("msg1").filters[2].Apply();
  106. document.all("msg1").filters[0].opacity=0;
  107. if (rT) document.all("msg1").filters[1].Play();
  108. if (bT) document.all("msg1").filters[2].Play();
  109. if (rT){
  110. if (document.all("msg1").filters[1].status==1 || document.all("msg1").filters[1].status==0){
  111. toolTipSTYLE.display = "none";}
  112. }
  113. if (bT){
  114. if (document.all("msg1").filters[2].status==1 || document.all("msg1").filters[2].status==0){
  115. toolTipSTYLE.display = "none";}
  116. }
  117. if (!rT && !bT) toolTipSTYLE.display = "none";
  118. //----------------------
  119. }
  120. }
  121. else // show
  122. {
  123. if(!fg) fg = "#D8D8D8";
  124. if(!bg) bg = "#F7F7F7";
  125. var content =
  126. '<div id="msg1" name="msg1" class="trans_msg">'+ msg +'</div>';
  127. if(ns4)
  128. {
  129. toolTipSTYLE.document.write(content);
  130. toolTipSTYLE.document.close();
  131. toolTipSTYLE.visibility = "visible";
  132. }
  133. if(ns6)
  134. {
  135. document.getElementById("toolTipLayer").innerHTML = content;
  136. toolTipSTYLE.display='block'
  137. }
  138. if(ie4)
  139. {
  140. document.all("toolTipLayer").innerHTML=content;
  141. toolTipSTYLE.display='block'
  142. //--图象过渡,淡入处理--
  143. var cssopaction=document.all("msg1").filters[0].opacity
  144. document.all("msg1").filters[0].opacity=0;
  145. if (rT) document.all("msg1").filters[1].Apply();
  146. if (bT) document.all("msg1").filters[2].Apply();
  147. document.all("msg1").filters[0].opacity=cssopaction;
  148. if (rT) document.all("msg1").filters[1].Play();
  149. if (bT) document.all("msg1").filters[2].Play();
  150. //----------------------
  151. }
  152. }
  153. } catch(e) {}
  154. }
  155. function moveToMouseLoc(e)
  156. {
  157. var scrollTop = getScrollTop();
  158. var scrollLeft = getScrollLeft();
  159. if(ns4||ns6)
  160. {
  161. x = e.pageX + scrollLeft;
  162. y = e.pageY - scrollTop;
  163. }
  164. else
  165. {
  166. x = event.clientX + scrollLeft;
  167. y = event.clientY;
  168. }
  169. if (x-scrollLeft > getViewportWidth() / 2) {
  170. x = x - document.getElementById("toolTipLayer").offsetWidth - 2 * offsetX;
  171. }
  172. if ((y+document.getElementById("toolTipLayer").offsetHeight+offsetY)>getViewportHeight()) {
  173. y = getViewportHeight()-document.getElementById("toolTipLayer").offsetHeight-offsetY;
  174. }
  175. toolTipSTYLE.left = (x + offsetX)+'px';
  176. toolTipSTYLE.top = (y + offsetY + scrollTop)+'px';
  177. return true;
  178. }
  179. initToolTips();