JavaScript放大镜的特效
<html>
<head>
<title>放大镜效果-建站学www.jzxue.com</title>
<base href="http://www.jzxue.com/System/uploads/userup/1103/">
<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="130936345148.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>
«
»