JS放大镜效果适合购物网站商品查看

简单的js放大镜效果,底部有demo链接

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript放大镜效果</title>
<meta name="description" content="三叶草设计" />
<meta name="keywords" content="三叶草设计" />
<style type="text/css">
* { margin: 0; padding: 0; }
ul { list-style: none; }
li { float: left; text-align: center; margin: 30px; }
li img { display: block; margin-bottom: 10px; }
img.photo { cursor: crosshair; padding: 3px; border: 1px solid #ccc; position: relative; }
.zoomdiv { position: absolute; z-index:100; display: none; width: 200px; height: 200px; overflow: hidden; border: 1px solid #ccc; background: #fff; }
.zoomdiv img { position: absolute; }
</style>
<script type="text/javascript">
<!--
/* Project:图片放大镜 Zoom Author:clover URL:http://yiyifly.com/blog Date:2008-11-29 CC. */
(function ()
{
	//自定义函数获取具有属性attr且值为val的标签名为tag的标签列表;
	function getByAttr(tag,attr,val)
	{
		var a=[];
		var e=document.getElementsByTagName(tag);
		var l=e.length;
		for(var i=0;i<l;i++)
		{
			if(e[i].getAttributeNode(attr)&&e[i].getAttributeNode(attr).value==val)
			{
				a[a.length]=e[i];
			}
		}return a;
	}
	//放大镜 其样式可以在CSS里定义;
	var Zoom=function ()
	{
		var that=this;
		var box=[];
		var b_img=[];
		this.s=getByAttr('img','class','photo');
		//获取需要应用放大镜的图片列表;
		for(var i=0;i<this.s.length;i++)
		{
			this.s[i].I=i;
			this.b=this.s[i].alt;
			//获取大图URL;
			box[i]=document.createElement('div');
			//创建'放大镜'
			b_img[i]=document.createElement('img');
			box[i].className='zoomdiv';
			//跟CSS里的类名对应
			b_img[i].src=this.b;
			box[i].appendChild(b_img[i]);
			this.s[i].parentNode.insertBefore(box[i],this.s[i]);

			//定位放大镜的位置
			var posX=this.s[i].offsetLeft+this.s[i].offsetWidth+10+'px';
			var posY=this.s[i].offsetTop+'px';
			box[i].style.left=posX;
			box[i].style.top=posY;
			this.s[i].onmouseover=function ()
			{
				box[this.I].style.display='block';
			}
			this.s[i].onmouseout=function ()
			{
				box[this.I].style.display='none';
			}
			this.s[i].onmousemove=function ()
			{
				var e=window.event||arguments[0];
				box[this.I].style.display='block';
				var L=box[this.I].offsetWidth/2-(e.clientX-that.s[this.I].offsetLeft)/that.s[this.I].offsetWidth*b_img[this.I].offsetWidth;
				var T=box[this.I].offsetWidth/2-(e.clientY-that.s[this.I].offsetTop)/that.s[this.I].offsetHeight*b_img[this.I].offsetHeight;
				b_img[this.I].style.left=L+'px';
				b_img[this.I].style.top=T+'px';

			}
		}
	}
	window.onload=function ()
	{
		Zoom();
		//调用
	}
}());
//-->
 </script>
</head>
<body>
<ul>
	<li> <img class="photo" src="http://yiyifly.com/demo/zoom/small_hill.gif" alt="http://yiyifly.com/demo/zoom/big_hill.gif" title="" /> <span>放大镜效果</span> </li>
	<li> <img class="photo" src="http://yiyifly.com/demo/zoom/small_hill.gif" alt="http://yiyifly.com/demo/zoom/big_hill.gif" title="" /> <span>放大镜效果</span> </li>
</ul>
</body>
</html>
JS放大镜DEMO演示:http://yiyifly.com/demo/zoom/
吹衣轻飏
