JavaScript图片放大镜效果代码[代码比较简单]

更新时间：2011年02月12日 15:36:14 作者：

实用漂亮的放大镜效果，基于JavaScript代码实现，貌似代码不太多，但效果确实不错，因调用的图片比较大，所以运行效果后请稍等一会，等待图片加载。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> #div1 { width:304px; height:222px; position:relative; margin:30px auto 0px;} #div1 img{width:304px; height:222px;} #div1 span { width:100px; height:100px; background:red; left:0px;top:0px; position:absolute; display:none; filter:alpha(opacity:20); opacity:0.2;} .show { width:100%; height:100%; background:red; position:absolute; z-index:10px; filter:alpha(opacity:10); opacity:0.1; left:0px; top:0px; } #div2 {width:304px; height:222px; position:relative; display:none; overflow:hidden; margin:0px auto 0px;} #img1 { position:absolute;} </style> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JavaScript 图片放大代码</title> <script type="text/javascript"> window.onload=function () { var oDiv=document.getElementById('div1'); var oShow=oDiv.getElementsByTagName('div')[0]; var oSpan=oDiv.getElementsByTagName('span')[0]; var oImg=document.getElementById('img1'); oShow.onmouseover=function() { oSpan.style.display='block'; oImg.parentNode.style.display='block'; }; oShow.onmouseout=function() { oSpan.style.display='none'; oImg.parentNode.style.display='none'; }; oShow.onmousemove=function(ev) { var oEvent=ev||event; var x=oEvent.clientX-oDiv.offsetLeft-oSpan.offsetWidth/2; var y=oEvent.clientY-oDiv.offsetTop-oSpan.offsetHeight/2; if(x<0) { x=0; } else if(x>oShow.offsetWidth-oSpan.offsetWidth) { x=oShow.offsetWidth-oSpan.offsetWidth; } if(y<0) { y=0; } else if(y>oShow.offsetHeight-oSpan.offsetHeight) { y=oShow.offsetHeight-oSpan.offsetHeight } oSpan.style.left=x+'px'; oSpan.style.top=y+'px'; var percentX=x/(oShow.offsetWidth-oSpan.offsetWidth); var percentY=y/(oShow.offsetHeight-oSpan.offsetHeight); var oImgparent=oImg.parentNode; oImg.style.left=-percentX*(oImg.offsetWidth-oImgparent.offsetWidth)+'px'; oImg.style.top=-percentY*(oImg.offsetHeight-oImgparent.offsetHeight)+'px'; }; }; </script> </head> <body> <div id="div1"> <img src="//img.jbzj.com/demoimg/201102/11_2_2.jpg" /> <span></span> <div class="show"></div> </div> <div id="div2"> <img id="img1" src="//img.jbzj.com/demoimg/201102/11_2_2.jpg" /> </div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

图片放大镜

电子商务网站上的常用的js放大镜效果
电子商务网站经常用到简单模仿一下,需要的朋友可以参考下。
2011-12-12
javascript IE7 浏览器本地图片预览
在 IE6 中，可以很方便地利用 img 的 src 属性，实现本地图片预览，然而在 IE7 中，这种办法却行不通。需要用 AlphaImageLoader
2009-03-03
非常不错的子鼠滑动图片效果 Javascript+CSS
一个效果如果没有一个合理的布局，是很难作出来的，所以布局是非常重要的基础！下边的效果，是试着假设在布局我无法改的情况下，能过外边的CSS或Javascript来实现一个滑动图片效果！
2009-04-04
javascript 图片放大缩小功能实现代码
很早以前写的一个效果，今天有时间了整理出来通过 Math.pow(x,y) 的“幂”运算来计算大小图片放大缩小的尺寸
2011-07-07
javascript椭圆旋转相册实现代码
支持自动和手动两种模式：自动模式下自动旋转展示，手动模式下通过鼠标选择当前图片，或通过提供的接口选择上一张/下一张图片
2012-01-01
img的onload的另类用法
2008-01-01
JavaScript 类似flash效果的立体图片浏览器
这是一款比较有立体感的图片浏览器，通过图层定位技术z-index让浏览器正在查看的图片突显出来，并让两边的图片呈现半透明状态。很个性化哦！
2010-02-02
JavaScript国旗变换效果代码
根据用户选择国家名词，显示对于的国家国旗
2008-08-08
$javascript入门·图片对象(无刷新变换图片)\滚动图像$
javascript入门·图片对象(无刷新变换图片)\滚动图像
javascript入门·图片对象(无刷新变换图片)\滚动图像...
2007-10-10
真正的连续滚动图片
真正的连续滚动图片...
2006-09-09