<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<script type="text/javascript">
var iX; //ZOOM的页面定位X
var iY; //ZOOM的页面定位Y
var icoWidth;//ico显示的宽
var icoHeight;//ico显示的高
var zoomW;//zoom实际的大小X
var zoomH;//zoom实际的大小Y
var zoomWidth;//zoom显示的大小X
var zoomHeight;//zoom显示的大小Y
var sX=0;//zoom的移动量X
var sY=0;//zoom的移动量Y
var zoomImg;
//初始化放大镜
function initZoom(src,ww,hh){
zoomImg=src;
zoomWidth=ww;
zoomHeight=hh;
//parseInt函数,将px值换算成int类型
icoWidth = parseInt(document.getElementById("icoImg").style.width);
icoHeight = parseInt(document.getElementById("icoImg").style.height);
//获取网络图片实际尺寸的方法
imgObj = new Image();
imgObj.src = zoomImg;
zoomW=imgObj.width;
zoomH=imgObj.height;
}
//关于放大镜在页面上的定位(显示于原来图象的右侧)
function zoomPos(){
var ico = document.getElementById("ico");
var icoX = ico.offsetLeft; //触发javascript的元素X定位
var icoY = ico.offsetTop; //触发javascript的元素Y定位
iX = icoX + icoWidth;//显示于右侧1
iY = icoY;//显示于右侧2
}
//关于放大镜放大部分的定位(鼠标定位的算法)
function mousePos(){
var ico = document.getElementById("ico");
var icoX = ico.offsetLeft; //触发javascript的元素X定位
var icoY = ico.offsetTop; //触发javascript的元素Y定位
//获取鼠标的定位
var mouseX = window.event.clientX;
var mouseY = window.event.clientY;
//鼠标从小图到大图的定位的算发
sX = (mouseX-icoX)*zoomW/icoWidth-zoomWidth/2;
sY = (mouseY-icoY)*zoomH/icoHeight-zoomHeight/2;
if(sX<0)(sX=0);
if(sY<0)(sY=0);
if(sX>(zoomW-zoomWidth))(sX=(zoomW-zoomWidth));
if(sY>(zoomH-zoomHeight))(sY=(zoomH-zoomHeight));
}
//创建放大镜的空白DIV块
function creatzoomDiv(){
document.body.innerHTML =
document.body.innerHTML +
"<div id=\"zoomDiv\" style=\"position:absolute;display:block;" +
"top:" + iY + "px;" +
"left:" + iX + "px;" +
"width: "+zoomWidth+"px;"+
"height: "+zoomHeight+"px; "+
"overflow: hidden;" +
"\">" +
"<img id=\"zoomIn\" src="+zoomImg+
" style=\"position:relative;right:"+sX+"px;bottom:"+sY+"px;\" />"+
"</div>";
}
//显示放大镜(显示的图象,图象宽度,图象高度)
function showZoom(src,ww,hh){
initZoom(src,ww,hh);
zoomPos();
var zoomDiv = document.getElementById("zoomDiv");
if(zoomDiv==null){
creatzoomDiv();
}else{
zoomDiv.style.display='block';
}
}
//隐藏放大镜
function hiddenZoom(){
var zoomDiv = document.getElementById("zoomDiv");
if(zoomDiv!=null){
zoomDiv.style.display='none';
}
}
//移动放大镜
function moveZoom(){
mousePos();
var zoomIn = document.getElementById("zoomIn");
if(zoomIn!=null){
zoomIn.style.right=sX;
zoomIn.style.bottom=sY;
}
}
</script>
</head>
<body>
<div id="ico" style="float:left;" >
<img id="icoImg" src="xanadu-200x150.jpg" style="width: 100px;height: 75px;" οnmοuseοver="showZoom('xanadu-800x600.jpg','500','375');" οnmοuseοut="hiddenZoom();" οnmοusemοve="moveZoom();" />
</div>
<div id="desc" style="float:left;">
XANADU NEXT<br />
</div>
</body>
</html>
说明:
1.xanadu-200x150.jpg 和 xanadu-800x600.jpg 是指内容相同,尺寸不同的2图片。当然都加载800*600象素的也可以,但就影响加载速度了。
2.width: 100px;height: 75px; 这个尺寸是缩略图的尺寸
3.'500','375'这个是放大镜的边框尺寸