Rain's Blog
The man who has made up his mind to win will never say“Impossible”. ——Napoleon
BlogJava
|
首页
|
发新随笔
|
发新文章
|
联系
|
聚合
|
管理
随笔:43 文章:0 评论:6 引用:0
图片局部放大
1
<
html
>
2
3
<
head
>
4
<
meta
name
="GENERATOR"
content
="Microsoft FrontPage 6.0"
>
5
<
title
>
标本资料
</
title
>
6
<
script
language
="javascript"
>
7
8
var
iDivHeight
=
250
;
//
放大显示区域宽度
9
var
iDivWidth
=
250
;
//
放大显示区域高度
10
var
iMultiple
=
8
;
//
放大倍数
11
12
//
显示放大图,鼠标移动事件和鼠标点击事件都会调用本事件
13
//
参数:src代表缩略图,sFileName放大图片名称
14
//
原理:依据鼠标对应缩略图左上角(0,0)上的位置控制放大图左上角对应显示区域左上角(0,0)的位置
15
function
show(src, sFileName)
16
{
17
//
判断鼠标事件产生时是否同时按下了
18
if
((event.button
==
1
)
&&
(event.ctrlKey
==
true
))
19
iMultiple
-=
1
;
20
else
21
if
(event.button
==
1
)
22
iMultiple
+=
1
;
23
if
(iMultiple
<
2
) iMultiple
=
2
;
24
25
if
(iMultiple
>
14
) iMultiple
=
14
;
26
27
var
iPosX, iPosY;
//
放大图对应显示区域左上角的坐标
28
var
iMouseX
=
event.offsetX;
//
鼠标对应缩略图左上角的横坐标
29
var
iMouseY
=
event.offsetY;
//
鼠标对应缩略图左上角的纵坐标
30
var
iBigImgWidth
=
src.clientWidth
*
iMultiple;
//
放大图宽度,是缩略图的宽度乘以放大倍数
31
var
iBigImgHeight
=
src.clientHeight
*
iMultiple;
//
放大图高度,是缩略图的高度乘以放大倍数
32
33
if
(iBigImgWidth
<=
iDivWidth)
34
{
35
iPosX
=
(iDivWidth
-
iBigImgWidth)
/
2
;
36
}
37
else
38
{
39
if
((iMouseX
*
iMultiple)
<=
(iDivWidth
/
2
))
40
{
41
iPosX
=
0
;
42
}
43
else
44
{
45
if
(((src.clientWidth
-
iMouseX)
*
iMultiple)
<=
(iDivWidth
/
2
))
46
{
47
iPosX
=
-
(iBigImgWidth
-
iDivWidth);
48
}
49
else
50
{
51
iPosX
=
-
(iMouseX
*
iMultiple
-
iDivWidth
/
2
);
52
}
53
}
54
}
55
56
if
(iBigImgHeight
<=
iDivHeight)
57
{
58
iPosY
=
(iDivHeight
-
iBigImgHeight)
/
2
;
59
}
60
else
61
{
62
if
((iMouseY
*
iMultiple)
<=
(iDivHeight
/
2
))
63
{
64
iPosY
=
0
;
65
}
66
else
67
{
68
if
(((src.clientHeight
-
iMouseY)
*
iMultiple)
<=
(iDivHeight
/
2
))
69
{
70
iPosY
=
-
(iBigImgHeight
-
iDivHeight);
71
}
72
else
73
{
74
iPosY
=
-
(iMouseY
*
iMultiple
-
iDivHeight
/
2
);
75
}
76
}
77
}
78
div1.style.height
=
iDivHeight;
79
div1.style.width
=
iDivWidth;
80
if
(div1.innerHTML
==
""
)
81
{
82
div1.innerHTML
=
"
<img id=BigImg style='position:relative'>
"
;
83
BigImg.src
=
"
http://biomuseum.zsu.edu.cn/ASP/search/hexapod/big_pic/
"
+
sFileName;
84
}
85
BigImg.width
=
iBigImgWidth;
86
BigImg.height
=
iBigImgHeight;
87
BigImg.style.top
=
iPosY;
88
BigImg.style.left
=
iPosX;
89
}
90
91
</
script
>
92
</
head
>
93
94
<
body
>
95
96
<
p
></
p
>
97
<
table
cellspacing
="0"
cellpadding
="1"
width
="727"
align
="center"
border
="0"
>
98
<
tr
>
99
<
td
align
="middle"
>
100
<
table
bordercolor
="#000000"
height
="301"
cellspacing
="0"
cellpadding
="0"
width
="302"
bgcolor
="#deffde"
border
="1"
>
101
<
tr
>
102
<
td
align
="middle"
>
103
<
marquee
scrolldelay
="120"
width
="80%"
><
font
size
="2"
>
将鼠标移入标本图中,右方显示局部放大图;单击鼠标左键,可以增大放大倍数;鼠标单击时同时按Ctrl键则减小放大倍数。
</
font
></
marquee
><
br
>
104
<
img
onmousemove
="show(this, 'B-000002.jpg')"
onmousedown
="show(this, 'B-000002.jpg')"
id
="imgSource"
src
="http://biomuseum.zsu.edu.cn/ASP/search/hexapod/small_pic/B-000002.jpg"
>
105
</
td
>
106
</
tr
>
107
</
table
>
108
</
td
>
109
<
td
style
="WIDTH: 15px"
width
="15"
></
td
>
110
<
td
align
="middle"
>
111
<
table
bordercolor
="#000000"
height
="301"
cellspacing
="0"
cellpadding
="0"
width
="302"
bgcolor
="#deffde"
border
="1"
>
112
<
tr
>
113
<
td
align
="middle"
><
a
href
="01/B-000002.jpg"
target
="_blank"
>
打开原图
</
a
>
114
<
div
id
="div1"
style
="OVERFLOW: hidden"
>
115
</
div
>
116
</
td
>
117
</
tr
>
118
</
table
>
119
</
td
>
120
</
tr
>
121
</
table
>
122
<
p
></
p
>
123
124
</
body
>
125
126
</
html
>
127
发表于 2006-02-05 15:49
Rain's Blog
阅读(811)
评论(0)
编辑
收藏
所属分类:
Javascript
新用户注册
刷新评论列表
只有注册用户
登录
后才能发表评论。
网站导航:
博客园
IT新闻
知识库
C++博客
博问
管理
相关文章:
类似FLASH的广告轮换效果
prototype.js[摘自java。net]
正则表达式
表单只输入数字
图片局部放大
任何元素提交表单
表单分支提交
下拉跳转菜单
提交后按钮失效
<
2006年2月
>
日
一
二
三
四
五
六
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
1
2
3
4
5
6
7
8
9
10
11
公告
常用链接
我的随笔
我的评论
我的参与
最新评论
留言簿
(2)
给我留言
查看公开留言
查看私人留言
随笔分类
(38)
Ajax(1)
(rss)
C#(3)
(rss)
CSS
(rss)
DataBase(3)
(rss)
Eclipse(5)
(rss)
Hibernate(1)
(rss)
JAVA(7)
(rss)
Javascript(9)
(rss)
SCM(1)
(rss)
Test(1)
(rss)
WorkFlow(1)
(rss)
收藏(6)
(rss)
随笔档案
(43)
2006年12月 (1)
2006年10月 (5)
2006年9月 (1)
2006年8月 (4)
2006年7月 (9)
2006年6月 (2)
2006年5月 (2)
2006年4月 (4)
2006年3月 (2)
2006年2月 (4)
2006年1月 (9)
收藏夹
(2)
Ajax(2)
(rss)
Ajax
Autoassist
behaviour
Rico
C#
michaelweinhardt's blog
博客们
blueoxygen
Brian Sun @ 爬树的泡泡
(rss)
java node
(rss)
piliskys
(rss)
snoics
(rss)
江南白衣
(rss)
软件人生 : Weblog
最新随笔
1. Eclipse RCP Tips
2. Eclipse keyboard shortcuts
3. Eclipse标准快捷键
4. Emacs 中文指南
5. 常用Emacs命令整理
6. Emacs 快捷键
7. Oracle9i xdb 与tomcat8080端口冲突(摘自http://www.blogjava.net/Victor/)
8. Atlas DragOverlayExtender 试用小记
9. Resharper 2.0
10. Multiple Main Entry Points in Visual Studio.NET
搜索
积分与排名
积分 - 39981
排名 - 1161
最新评论
1. re: 提交后按钮失效[未登录]
ddddd
--ddd
2. re: 常用Emacs命令整理
请问我要将clipboard里的文字粘贴199遍在某处该怎么做?
--youke
3. re: [转][国内著名大学][课件大全][在线点播][未登录]
好好的东东,可为什么我打不开啊~~~~
--七七001
4. re: [转][国内著名大学][课件大全][在线点播][未登录]
hao hao
--111
5. re: 利用 Spring 和 EHCache 缓存结果(翻译)选择自 rosen 的 Blog
评论内容较长,点击标题查看
--Rosen
阅读排行榜
1. 常用Emacs命令整理(14609)
2. Maven起步——教你开始使用Maven二(图)(3437)
3. [转][国内著名大学][课件大全][在线点播](1823)
4. JIRA安装日志(1417)
5. Emacs 中文指南(1367)
评论排行榜
1. [转][国内著名大学][课件大全][在线点播](2)
2. 提交后按钮失效(1)
3. 常用Emacs命令整理(1)
4. 听《红色摇滚》中国际歌,让人热血沸腾(1)
5. 利用 Spring 和 EHCache 缓存结果(翻译)选择自 rosen 的 Blog(1)