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
>
查看全文
相关阅读:
WPF 模拟UI 键盘录入
rabbitmq使用dead letter机制来进行retry
工厂设计模式
python 内置速度最快算法(堆排)
简单工厂设计模式
杂类
MorkDown 常用语法总结
使用python列表推导式进行99乘法表
linux 命令free -m 命令结果分析
理解记忆三种常见字符编码:ASCII, Unicode,UTF-8
原文地址:https://www.cnblogs.com/stonehuang/p/6603227.html
最新文章
CentOS7 tomcat systemctl脚本
Jquery中的has、find、filter方法区别
curl查询公网出口IP
[转] C# mysql 事务回滚
C# 窗体显示避免抢夺焦点
MySQL 常用语法 之 DISTINCT
MySQL 常用语法 之 UNION与UNION ALL
C# 属性事件一些设置说明
C# 在Bitmap上绘制文字出现锯齿的问题
颜色ARGB的混合
热门文章
C# 如何使用NPOI操作Excel以及读取合并单元格等
C# Winform关于控件TabControl闪烁的问题
winform带你玩转rabbitMQ
C# .Net动态调用webService实现思路及代码
ifram刷新父窗口中内嵌页面
使用js如何获取treeview控件的当前选中的节点
JS调用服务器端方法
datalist的模板里的label要绑定一个函数
js获取Session问题
服务器控件调用JS函数
Copyright © 2011-2022 走看看