会员
周边
众包
新闻
博问
闪存
赞助商
所有博客
当前博客
我的博客
我的园子
账号设置
简洁模式
...
退出登录
注册
登录
古道
分享资源,交流技术。
博客园
首页
新随笔
联系
订阅
管理
js小技巧--鼠标滑过显示大图
记些小技巧,方便大家方便自己。
直接来代码:
Code
1
<%
@ Page Language
=
"
C#
"
AutoEventWireup
=
"
true
"
CodeFile
=
"
Default2.aspx.cs
"
Inherits
=
"
Default2
"
%>
2
3
<!
DOCTYPE html PUBLIC
"
-//W3C//DTD XHTML 1.0 Transitional//EN
"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
"
>
4
5
<
html xmlns
=
"
http://www.w3.org/1999/xhtml
"
>
6
<
head runat
=
"
server
"
>
7
<
title
>
无标题页
</
title
>
8
9
<
script language
=
"
javascript
"
type
=
"
text/javascript
"
>
10
//
显示大图
11
function showPic(sUrl)
{
12
var x,y;
13
x
=
event
.clientX;
14
y
=
event
.clientY;
15
document.getElementById(
"
picLayer
"
).style.left
=
x;
16
document.getElementById(
"
picLayer
"
).style.top
=
y;
17
document.getElementById(
"
picLayer
"
).innerHTML
=
"
<img src=\
""
+ sUrl +
"
\
"
>
"
;
18
document.getElementById(
"
picLayer
"
).style.display
=
"
block
"
;
19
}
20
21
//
隐藏大图
22
function hiddenPic()
{
23
document.getElementById(
"
picLayer
"
).innerHTML
=
""
;
24
document.getElementById(
"
picLayer
"
).style.display
=
"
none
"
;
25
}
26
</
script
>
27
28
29
</
head
>
30
<
body
>
31
32
<
form id
=
"
form1
"
runat
=
"
server
"
>
33
<
div
>
34
<%--
显示大图片的层,样式比较简单大家可以自己定义
--%>
35
<
div id
=
"
picLayer
"
style
=
"
display:none;position:absolute;z-index:1;
"
></
div
>
36
37
<%--
显示图片
--%>
38
<
img src
=
"
mypic.jpg
"
onmouseout
=
"
hiddenPic();
"
onmousemove
=
"
showPic(this.src);
"
width
=
"
200
"
height
=
"
100
"
alt
=
"
哈哈
"
/>
39
40
41
</
div
>
42
</
form
>
43
</
body
>
44
</
html
>
45
很简单,有注释。有更好的方法请指教。
posted @
2008-11-22 14:22
古道
阅读(
1157
) 评论(
1
)
编辑
收藏
举报
刷新页面
返回顶部
公告