[原创]========一个JavaScript放大镜的特效=============

wujinjian2008n 2009-09-27 11:21:55

加精

朋友让我帮他写一个放大镜特效，写好了也给大家分享一下。

在 IE6，7，火狐，谷歌浏览器上测试都通过。

////////////////////////////////////////////////////////////////////////////////



<!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">

<html>

	<head>

		<title>wujinjian</title>

		<base href="http://i3.6.cn/cvbnm/34/d2/48/">

		<script type="text/javascript">



			/*

			 *特别注意:

			 *放大的倍数=原图的大小/小图片显示的大小

			 *自己查看原图片的大小，我这是 400*400 px

			 */



			//图片对象

			var imgObj;

			//放大镜div对象

			var zoomDivObj;

			//显示小图片的div

			var mainDivObj;

			//放大后显示图片的div

			var showDivObj;

			//放大镜的大小

			var zoomSize=50;

			//放大镜的倍数(不能随便填)

			var zoomMultiple=2;

			//图片的路径

			var imgPath="7d0fe1b65e1389c46045cd2d0e43a041.gif";

			//小图片显示的大小

			var imgW=200;

			var imgH=200;

			//显示的位置

			var left=100;

			var top=10;

			//放大镜div的透明度(0~100)

			var opacity=50;

			//放大镜div的颜色

			var rgb="223,223,223";



			function load()

			{

				if(zoomDivObj==null)

					createZoomDivObj();

				if(mainDivObj==null)

					createMainDivObj();

				if(showDivObj==null)

					createShowDivObj();

				if(imgObj==null)

					createImgObj();



				zoomDivObj.style.width=zoomSize+"px";

				zoomDivObj.style.height=zoomSize+"px";



				showDivObj.style.width=zoomSize*zoomMultiple+"px";

				showDivObj.style.height=zoomSize*zoomMultiple+"px";



				showDivObj.style.backgroundImage="url("+imgPath+")";



				imgObj.src=imgPath;

				imgObj.style.width=imgW+"px";

				imgObj.style.height=imgH+"px";



				mainDivObj.style.width=imgW+"px";

				mainDivObj.style.height=imgH+"px";

				mainDivObj.style.left=left+"px";

				mainDivObj.style.top=top+"px";



				showDivObj.style.left=left+imgW+50+"px";

				showDivObj.style.top=top+"px";



				zoomDivObj.style.backgroundColor="rgb("+rgb+")";

				

				//两个都要写，为了IE 和 火狐 的通用

				zoomDivObj.style.filter="alpha(opacity="+opacity+")";

				zoomDivObj.style.opacity=opacity/100;

			}



			function showZoomDiv()

			{

				if(zoomDivObj==null)

					createZoomDivObj();



				zoomDivObj.style.visibility="visible";

			}

			

			function moveZoomDiv(e)

			{

				if(zoomDivObj==null)

					createZoomDivObj();



				var w=zoomDivObj.style.width.replace("px","")-0;

				var h=zoomDivObj.style.height.replace("px","")-0;

				

				if(mainDivObj==null)

					createMainDivObj();



				var mouseX=e.clientX-(mainDivObj.style.left.replace("px","")-0);

				var mouseY=e.clientY-(mainDivObj.style.top.replace("px","")-0);

				

				window.status=mouseX+"    "+mouseY;



				zoomDivObj.style.left=mouseX-(w/2)+"px";

				zoomDivObj.style.top=mouseY-(h/2)+"px";



				if(showDivObj==null)

					createShowDivObj();

				

				showDivObj.style.backgroundPosition=(-mouseX+w/2)*zoomMultiple+"px "+(-mouseY+h/2)*zoomMultiple+"px";

			}



			function hiddenZoomDiv()

			{

				if(zoomDivObj==null)

					createZoomDivObj();



				//zoomDivObj.style.visibility="hidden";

			}



			function createZoomDivObj()

			{

				zoomDivObj=document.getElementById("zoom_div_id");

			}



			function createMainDivObj()

			{

				mainDivObj=document.getElementById("main_div_id");

			}



			function createShowDivObj()

			{

				showDivObj=document.getElementById("show_div_id");

			}



			function createImgObj()

			{

				imgObj=document.getElementById("img_id");

			}

		</script>

	</head>

	<body onmousemove="moveZoomDiv(event)" onload="load()">

		<div id="main_div_id" style="position:absolute;overflow:hidden;background-color:cyan;border:gray solid 1px;" onmouseover="showZoomDiv()" onmouseout="hiddenZoomDiv()" >

			<img id="img_id">



			<div id="zoom_div_id" style="position:absolute;left:0px;top:0px;overflow:hidden;visibility:hidden;"></div>

		</div>



		<div id="show_div_id" style="position:absolute;overflow:hidden;background-color:cyan;background-repeat:no-repeat;border:gray solid 1px;" ></div>

	</body>

</html>