智睿软件_技术交流论坛综合站长Web页面设计 → 点击图片局部放大特效代码


  共有20482人关注过本帖树形打印

主题:点击图片局部放大特效代码

帅哥哟,离线,有人找我吗?
zhirui
  1楼 个性首页 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:管理员 帖子:520 积分:8740 威望:0 精华:5 注册:2009-07-07
点击图片局部放大特效代码  发帖心情 Post By: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>


考试管理系统,适合中小学校,驾校,技术认证考试 支持(0中立(0反对(1回到顶部