zoukankan
html css js c++ java
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
很简单,有注释。有更好的方法请指教。
查看全文
相关阅读:
安装和配置SQL
自定义中间件封装为模块
留言板
Spring Factories机制
JVM参数配置
全链路监控的方案概述与比较
Lombok注解-@SneakyThrows
@FeignClient注解 中属性 contextId使用
@validate或@valid注解进行数据校验的解决方案
maven的settings.xml标签详解
原文地址:https://www.cnblogs.com/gudao119/p/1338946.html
最新文章
python之文件操作
深浅copy
直播获奖
方格取数
优秀的拆分
字符串替换
青少年软件编程(C语言)等级考试试卷(三级)
最大连续子段和
标题统计
明明的随机数
热门文章
比例简化
扫雷游戏
vue点击按钮跳转页面
使用vscode创建uni-app项目
vue移动端记录列表滚动如何快速找到是哪个元素产生的滚动
电脑剪贴板的快捷键
Vue-router教程与使用步骤和方法
分支循环
Vue的修饰符
Vue模板语法
Copyright © 2011-2022 走看看