关于放大镜任意图片问题

sxq51189540 2009-09-28 12:11:41

前几天有个兄弟发个关于放大镜的代码，我想问下如何能让7d0fe1b65e1389c46045cd2d0e43a041.gif这个图片在任意一台机器上显示啊，我看这个图片代码只存在http://i3.6.cn/cvbnm/34/d2/48/这个下面，也没有在我本地，为什么我能正常显示呢。

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

...全文