zoukankan
html css js c++ java
用javascript放大图片局部
<
html
>
<
head
>
<
title
>
emu
</
title
>
</
head
>
<
body
>
<
BR
>
原图:
<
BR
>
<
img
src
="http://img.pconline.com.cn/images/photo2/839980/1118509777696.JPG"
onmousemove
="zoom()"
id
=srcImg>
<BR
>
局部放大图:
<
BR
>
<
div
style
="overflow:hidden"
><
img
id
=zoomImg></div>
<SCRIPT LANGUAGE
="JavaScript"
>
<!--
zoomImg.src = srcImg.src;
srcImg.height = srcImg.height/2;
var zoomRate = 5;
zoomImg.height = srcImg.height*zoomRate;
zoomImg.parentNode.style.width = srcImg.width;
zoomImg.parentNode.style.height = srcImg.height;
function zoom(){
var elm = event.srcElement;
h = elm.offsetHeight/zoomRate/2;
w = elm.offsetWidth/zoomRate/2;
var x = event.x-elm.offsetLeft;
x=x<(elm.offsetWidth-w)?x<w?w:x:elm.offsetWidth-w;
zoomImg.style.marginLeft=(w-x)*zoomRate;
var y = event.y-elm.offsetTop;
y=y<(elm.offsetHeight-h)?y<h?h:y:elm.offsetHeight-h;
zoomImg.style.marginTop=(h-y)*zoomRate;
}
//
-->
</
SCRIPT
>
</
body
>
</
html
>
查看全文
相关阅读:
usaco dec 2012 first!
uva 1449
unity3D学习笔记之DOTween插件的学习(持续更新)
中南林业科技大学第十一届程序设计大赛 G 0和5
中南林业科技大学第十一届程序设计大赛 D 最大的湖
最小生成树之克鲁斯卡尔(Kruskal)算法
最小生成树Prim算法理解
判断无向图是否联通模板(并查集版)(DFS),BFS等其他方法将陆续更新
矩阵压缩学习笔记
C/C++ assert()函数用法总结
原文地址:https://www.cnblogs.com/stonehuang/p/6603227.html
最新文章
地鼠游戏
修复公路
2015noip 斗地主
骑士精神
2009 最优贸易
HH的项链(树状数组+离线处理)
糖果题解(01背包)
汇编实验7:数值运算与数据输出
汇编学习
T
热门文章
E. Number of Simple Paths 题解(思维)
O
bzoj 1503: [NOI2004]郁闷的出纳员
1588: [HNOI2002]营业额统计
hdu 4691 Front compression
poj 2774 Long Long Message
ural 1297 Palindrome
spoj 694 Distinct Substrings
poj 3261 Milk Patterns
poj 1743 Musical Theme
Copyright © 2011-2022 走看看