1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 <style type="text/css">
6 html { overflow:-moz-scrollbars-vertical; } /*Always show Firefox scrollbar*/
7 body{ font:12px/22px "宋体"; word-break:break-all; text-align:left; background:#C0C0C0; color:#4E4E4E;}
8 ul,li{ list-style:none;}
9 a{ color:#333; text-decoration:none;}
10 a:hover{ color:#ff722d; text-decoration:none;}
11 img{ border:0;}
12 a img,a:hover img{ border:0;}
13 .latestWeb{ width:980px; margin:10px auto 0;}
14 .latestWeb ul{ overflow:hidden; _height:1%;}
15 .latestWeb li{ float:left; border:1px solid #EBEAEA; width:150px; padding:10px; margin:14px 14px 0 0; }
16 .trans_msg{ filter:alpha(opacity=100,enabled=1) revealTrans(duration=.2,transition=1) blendtrans(duration=.2);}
17 div.bodycontent{font-family:Arial, Helvetica, sans-serif;padding:0 10px 10px 13px;color:#555;line-height:22px;text-align:justify;text-justify:inter-ideograph;}
18 div.bodycontent ul{margin-left:0px}
19 </style>
20 <title>JS实现鼠标移到小图上显示大图的代码 - www.webdm.cn</title>
21 </head>
22
23 <body style="text-align:center">
24
25
26 <div class="latestWeb">
27 <ul>
28 <li class="">
29 <div style="width:128px; height:126px"><a href="http://www.webdm.cn/" target="_blank"><img src='http://www.webdm.cn/images/20100909/20095121750198009074_small.jpg' onMouseOver="toolTip('<img src=http://www.webdm.cn/images/20100909/20095121750198009074.jpg>')" onMouseOut="toolTip()"></a></div>
30 </li>
31 <li class="">
32 <div style="width:128px; height:126px"><a href="http://www.webdm.cn/" target="_blank"><img src='http://www.webdm.cn/images/20100909/2009512172933475478_small.jpg' onMouseOver="toolTip('<img src=http://www.webdm.cn/images/20100909/2009512172933475478.jpg>')" onMouseOut="toolTip()"></a></div>
33 </li>
34 <li class="">
35 <div style="width:128px; height:126px"><a href="http://www.webdm.cn/" target="_blank"><img src='http://www.webdm.cn/images/20100909/200957188213477090_small.jpg' onMouseOver="toolTip('<img src=http://www.webdm.cn/images/20100909/200957188213477090.jpg>')" onMouseOut="toolTip()"></a></div>
36 </li>
37 <li class="">
38 <div style="width:128px; height:126px"><a href="http://www.webdm.cn/" target="_blank"><img src='http://www.webdm.cn/images/20100909/2009511102511591969_small.jpg' onMouseOver="toolTip('<img src=http://www.webdm.cn/images/20100909/2009511102511591969.jpg>')" onMouseOut="toolTip()"></a></div>
39 </li>
40 <li class="">
41 <div style="width:128px; height:126px"><a href="http://www.webdm.cn/" target="_blank"><img src='http://www.webdm.cn/images/20100909/2009511956153474660_small.jpg' onMouseOver="toolTip('<img src=http://www.webdm.cn/images/20100909/2009511956153474660.jpg>')" onMouseOut="toolTip()"></a></div>
42 </li>
43 <li class="">
44 <div style="width:128px; height:126px"><a href="http://www.webdm.cn/" target="_blank"><img src='http://www.webdm.cn/images/20100909/20095121752382849770_small.jpg' onMouseOver="toolTip('<img src=http://www.webdm.cn/images/20100909/20095121752382849770.jpg>')" onMouseOut="toolTip()"></a></div>
45 </li>
46 <li class="">
47 <div style="width:128px; height:126px"><a href="http://www.webdm.cn/" target="_blank"><img src='http://www.webdm.cn/images/20100909/200955181403758690_small.jpg' onMouseOver="toolTip('<img src=http://www.webdm.cn/images/20100909/200955181403758690.jpg>')" onMouseOut="toolTip()"></a></div>
48 </li>
49 <li class="">
50 <div style="width:128px; height:126px"><a href="http://www.webdm.cn/" target="_blank"><img src='http://www.webdm.cn/images/20100909/2009551813457815940_small.jpg' onMouseOver="toolTip('<img src=http://www.webdm.cn/images/20100909/2009551813457815940.jpg>')" onMouseOut="toolTip()"></a></div>
51 </li>
52 <li class="">
53 <div style="width:128px; height:126px"><a href="http://www.webdm.cn/" target="_blank"><img src='http://www.webdm.cn/images/20100909/200955181308903992_small.jpg' onMouseOver="toolTip('<img src=http://www.webdm.cn/images/20100909/200955181308903992.jpg>')" onMouseOut="toolTip()"></a></div>
54 </li>
55 <li class="">
56 <div style="width:128px; height:126px"><a href="http://www.webdm.cn/" target="_blank"><img src='http://www.webdm.cn/images/20100909/200955181403758690_small.jpg' onMouseOver="toolTip('<img src=http://www.webdm.cn/images/20100909/200955181403758690.jpg>')" onMouseOut="toolTip()"></a></div>
57 </li>
58 </ul>
59 </div>
60 <script language="javascript">
61 function getViewportHeight() {
62 if (window.innerHeight != window.undefined) return window.innerHeight;
63 if (document.compatMode == 'CSS1Compat') return document.documentElement.clientHeight;
64 if (document.body) return document.body.clientHeight;
65
66 return window.undefined;
67 }
68 function getViewportWidth() {
69 if (window.innerWidth != window.undefined) return window.innerWidth;
70 if (document.compatMode == 'CSS1Compat') return document.documentElement.clientWidth;
71 if (document.body) return document.body.clientWidth;
72
73 return window.undefined;
74 }
75
76 /**
77 * Gets the real scroll top
78 */
79 function getScrollTop() {
80 if (self.pageYOffset) // all except Explorer
81 {
82 return self.pageYOffset;
83 }
84 else if (document.documentElement && document.documentElement.scrollTop)
85 // Explorer 6 Strict
86 {
87 return document.documentElement.scrollTop;
88 }
89 else if (document.body) // all other Explorers
90 {
91 return document.body.scrollTop;
92 }
93 }
94 function getScrollLeft() {
95 if (self.pageXOffset) // all except Explorer
96 {
97 return self.pageXOffset;
98 }
99 else if (document.documentElement && document.documentElement.scrollLeft)
100 // Explorer 6 Strict
101 {
102 return document.documentElement.scrollLeft;
103 }
104 else if (document.body) // all other Explorers
105 {
106 return document.body.scrollLeft;
107 }
108 }
109 /*
110 渐变的弹出图片
111 使用方法：
112 将ToolTip.js包含在网页body的结束标签后
113 调用方法：
114 <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>
115
116 必须CSS样式
117 .trans_msg
118 {
119 filter:alpha(opacity=100,enabled=1) revealTrans(duration=.2,transition=1) blendtrans(duration=.2);
120 }
121 */
122 //--初始化变量--
123 var rT = true; //允许图像过渡
124 var bT = true; //允许图像淡入淡出
125 var tw = 150; //提示框宽度
126 var endaction = false; //结束动画
127 var ns4 = document.layers;
128 var ns6 = document.getElementById && !document.all;
129 var ie4 = document.all;
130 offsetX = 10;
131 offsetY = 20;
132 var toolTipSTYLE = "";
133 function initToolTips() {
134 tempDiv = document.createElement("div");
135 tempDiv.id = "toolTipLayer";
136 tempDiv.style.position = "absolute";
137 tempDiv.style.display = "none";
138 document.body.appendChild(tempDiv);
139 if (ns4 || ns6 || ie4) {
140 if (ns4) toolTipSTYLE = document.toolTipLayer;
141 else if (ns6) toolTipSTYLE = document.getElementById("toolTipLayer").style;
142 else if (ie4) toolTipSTYLE = document.all.toolTipLayer.style;
143 if (ns4) document.captureEvents(Event.MOUSEMOVE);
144 else {
145 toolTipSTYLE.visibility = "visible";
146 toolTipSTYLE.display = "none";
147 }
148 document.onmousemove = moveToMouseLoc;
149 }
150 }
151 function toolTip(msg, fg, bg) {
152 try {
153 if (toolTip.arguments.length < 1) // hide
154 {
155 if (ns4) {
156 toolTipSTYLE.visibility = "hidden";
157 }
158 else {
159 //--图象过渡，淡出处理--
160 if (!endaction) { toolTipSTYLE.display = "none"; }
161 if (rT) document.all("msg1").filters[1].Apply();
162 if (bT) document.all("msg1").filters[2].Apply();
163 document.all("msg1").filters[0].opacity = 0;
164 if (rT) document.all("msg1").filters[1].Play();
165 if (bT) document.all("msg1").filters[2].Play();
166 if (rT) {
167 if (document.all("msg1").filters[1].status == 1 || document.all("msg1").filters[1].status == 0) {
168 toolTipSTYLE.display = "none";
169 }
170 }
171 if (bT) {
172 if (document.all("msg1").filters[2].status == 1 || document.all("msg1").filters[2].status == 0) {
173 toolTipSTYLE.display = "none";
174 }
175 }
176 if (!rT && !bT) toolTipSTYLE.display = "none";
177 //----------------------
178 }
179 }
180 else // show
181 {
182 if (!fg) fg = "#777777";
183 if (!bg) bg = "#eeeeee";
184 var content =
185 '<table id="msg1" name="msg1" border="0" cellspacing="0" cellpadding="1" bgcolor="' + fg + '" class="trans_msg"><td>' +
186 '<table border="1" cellspacing="2" cellpadding="3" bgcolor="' + bg +
187 '"><td><font face="Arial" color="' + fg +
188 '" size="-2">' + msg +
189 '</font></td></table></td></table>';
190
191 if (ns4) {
192 toolTipSTYLE.document.write(content);
193 toolTipSTYLE.document.close();
194 toolTipSTYLE.visibility = "visible";
195 }
196 if (ns6) {
197 document.getElementById("toolTipLayer").innerHTML = content;
198 toolTipSTYLE.display = 'block'
199 }
200 if (ie4) {
201 document.all("toolTipLayer").innerHTML = content;
202 toolTipSTYLE.display = 'block'
203 //--图象过渡，淡入处理--
204 var cssopaction = document.all("msg1").filters[0].opacity
205 document.all("msg1").filters[0].opacity = 0;
206 if (rT) document.all("msg1").filters[1].Apply();
207 if (bT) document.all("msg1").filters[2].Apply();
208 document.all("msg1").filters[0].opacity = cssopaction;
209 if (rT) document.all("msg1").filters[1].Play();
210 if (bT) document.all("msg1").filters[2].Play();
211 //----------------------
212 }
213 }
214 } catch (e) { }
215 }
216 function moveToMouseLoc(e) {
217 var scrollTop = getScrollTop();
218 var scrollLeft = getScrollLeft();
219 if (ns4 || ns6) {
220 x = e.pageX + scrollLeft;
221 y = e.pageY - scrollTop;
222 }
223 else {
224 x = event.clientX + scrollLeft;
225 y = event.clientY;
226 }
227
228 if (x - scrollLeft > getViewportWidth() / 2) {
229 x = x - document.getElementById("toolTipLayer").offsetWidth - 2 * offsetX;
230 }
231
232 if ((y + document.getElementById("toolTipLayer").offsetHeight + offsetY) > getViewportHeight()) {
233 y = getViewportHeight() - document.getElementById("toolTipLayer").offsetHeight - offsetY;
234 }
235 toolTipSTYLE.left = (x + offsetX) + 'px';
236 toolTipSTYLE.top = (y + offsetY + scrollTop) + 'px';
237 return true;
238 }
239 initToolTips();
240
241 </script>
242 <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</p>
243 <p></p>
244 <p><p>鼠标移上去显示大图的代码</p></p>
245 <p></p>
246 </body>
247 </html>
