以文本方式查看主题

-  智睿软件_技术交流论坛  (http://zhirui.net/bbs/index.asp)
--  Web页面设计  (http://zhirui.net/bbs/list.asp?boardid=33)
----  点击图片局部放大特效代码  (http://zhirui.net/bbs/dispbbs.asp?boardid=33&id=798)
--  作者：zhirui
--  发布时间：2010-04-27 22:54:42
--  点击图片局部放大特效代码
这里给大家推荐一个超强、超简单当鼠标点击图片任何位置，都局部放大，并且可以递增的放大，无限放大。对于图片展示，产品展示的时候用特别的适合。很实用的代码哟，你试试看啊！

<div style="width: 200px; height: 200px; z-index:1; overflow: hidden; position: relative;" id="panl">
      <img id="img" border="0" src="http://www.ekesn.com/img/001.jpg" width="173" height="232" style="left: 0; position: absolute; top: 0;"></div>


<script type="text/javascript">
var ZOOM=1.5
img.style.zoom=1;
function zoom(){
var divW=parseFloat(panl.style.width),divH=parseFloat(panl.style.height);
var x=event.offsetX*img.style.zoom*ZOOM;
var y=event.offsetY*img.style.zoom*ZOOM;
img.style.zoom*=ZOOM;
img.style.left=divW/2-x;
img.style.top=divH/2-y;
}
</script>