|
蓝森林 http://www.lslnet.com 2006年8月25日 8:28
 JS图片放大缩小效果,这效果太爽了,不知如何实现
效果如下:
http://www.artron.net/artrondb/shownewpic.php?picid=art40830310
请教这效果如何弄的?
我怎么也弄不出来.....郁闷......拷人家的代码也不会用,太失败了,,,悲哀呀!~~ |
| 这个也想知道 |
用"JavaScript放大镜"为关键词进行搜索，会找到你要的答案的：
http://www.baidu.com/s?cl=3&wd=javascript%B7%C5%B4%F3%BE%B5&t=12 |
| 非常感谢fourfour |
用javascript制作放大镜放大图片
[html]
<html>
<head>
<title>emu</title>
</head>
<body>
<BR>
原图：<BR>
<img src=http://www.web745.com/image/logo.gif width="280" height="150" id=srcImg onmousemove="zoom()">
<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>
[/html] |
| 好东西！！！ |
|
