javascript函数实现鼠标指向后带图片的提示效果
引用:
当鼠标移到产品缩略图上时能弹出显示大图，用JS写两个函数即可实现： @) s+ n" X: g' _9 L
4 W1 A& T. ~( e0 N3 b 一个函数在鼠标移到图片上调用，显示隐藏层并将图片载入到层中;
' n+ x, o" l4 R+ m( i/ _9 H7 C3 V; F* {* x% v4 ?! B
另一个函数在鼠标移出图片上调用，清空层的内容并隐藏层。使用时需将"this.src"改为产品大图地址。" d, a, D% f) e! Z9 z. |
- F' `! J. L8 p$ \* U) v7 u
以下是引用片段：
6 V0 X! X6 H! D<html> 0 j# _( p! i4 y, \7 M( J
<head> * O1 P, S% P$ ?* u* ]7 q( F
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
! b$ I# _* A" p0 k<title>JS函数实现鼠标指向后带图片的提示效果</title> ( `8 ` }# X0 |! w) X& ^8 r
<script language="javascript">
v5 q. d( F5 e" O, Nfunction showPic(sUrl){
8 q6 Q9 I' Q3 D: h var x,y;
6 i0 G1 O0 Q; n x = event.clientX;
6 |8 }, L1 d" d/ D) ~ y = event.clientY;
. W; r' T# l! q7 I document.getElementById("Layer1").style.left = x;
3 F, \% c. V6 v6 W( u document.getElementById("Layer1").style.top = y; & a( _+ ^' P" F2 r. z) t) }9 H7 B
document.getElementById("Layer1").innerHTML = "<img src=\"" + sUrl + "\">";
4 k2 x2 T4 \- J6 v( Q* ? document.getElementById("Layer1").style.display = "block"; 9 E0 u3 ?, Q8 d/ x1 `" r
}
, t- j$ W* L/ b: jfunction hiddenPic(){
& D" m+ [% E" q document.getElementById("Layer1").innerHTML = ""; ) a. F( ~. F! X6 W" [! x7 _
document.getElementById("Layer1").style.display = "none";
" z/ [& b: F! m+ b: d, ^& W B}
+ ]1 ?( M7 H& y5 _6 i2 X</script> ' m4 ^8 Z& g- }8 M0 R
</head>
3 \5 M3 c3 S) n<body> . f3 x# x) y. c+ b" F8 z, ~
<div id="Layer1" style="display:none;position:absolute;z-index:1;"></div>
/ F8 o; I1 S/ K; j$ w2 p<img src="http://www.cniter.com/logo/logo.gif" onmouseout="hiddenPic();" onmousemove="showPic(this.src);" /> ) C) `* i. _' H$ W
<p></p>
6 ~0 ~, c2 P$ c* v% [; n$ @<img src="http://www.cniter.com/logo/logo.gif" onmouseout="hiddenPic();" onmousemove="showPic(this.src);" /> ; S$ Z$ j* \5 H0 e' ~( X$ C
</body>
, T, m3 u% M& E7 g% c; c</html>
: N O( N. g0 @7 w& g
7 I2 \, y& M, @* f
搜索更多相关主题的帖子:
javascript 函数 实现 鼠标 指向
