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
>
查看全文
相关阅读:
2015多校1006.First One
2015多校.MZL's endless loop(欧拉回路的机智应用 || 构造)
LUXURY 8
矩阵快速幂模板
博弈入门
cf558c(bfs)
LUXURY 7
dfs序 + RMQ = LCA
双端队列
UVa-401 Palindromes
原文地址:https://www.cnblogs.com/stonehuang/p/6603227.html
最新文章
算法竞赛模板 优先队列
算法竞赛模板 全排列(运用STL的next_permutation)
PTA 天梯赛训练 词频统计(map+vector)
算法竞赛模板 最小生成树
PTA 天梯赛 L2-016. 愿天下有情人都是失散多年的兄妹(dfs)
PTA 天梯赛训练 修理牧场(哈夫曼树+优先队列)
TZOJ 5065 最长连续子序列(前缀和)
TZOJ 1743 集合运算(set并、交、差集)
算法竞赛模板 并查集
算法竞赛模板 博弈
热门文章
算法竞赛模板 大数四则运算
AtCoder Regular Contest 090
goodgye2017 Hello2018(大二上寒假开始)
POJ3254
Codeforces Round #456 (Div. 2)
求逆元的常用方法
高精度模板
Good Bye 2017
突然生病
LUXURY15
Copyright © 2011-2022 走看看