js鼠标放图片上图片显示大图（转）

来源：互联网发布：linux kill 命令详解编辑：程序博客网时间：2024/04/28 11:00

js鼠标放图片上图片显示大图

<html>

<head>

var iDivHeight = 250; //放大显示区域宽度

var iDivWidth = 250;//放大显示区域高度

var iMultiple = 8; //放大倍数

//显示放大图，鼠标移动事件和鼠标点击事件都会调用本事件

//参数：src代表缩略图，sFileName放大图片名称

//原理：依据鼠标对应缩略图左上角（0，0）上的位置控制放大图左上角对应显示区域左上角（0，0）的位置

function show(src, sFileName)

{

//判断鼠标事件产生时是否同时按下了

if ((event.button == 1) && (event.ctrlKey == true))

iMultiple -= 1;

else

if (event.button == 1)

iMultiple += 1;

if (iMultiple < 2) iMultiple = 2;

if (iMultiple > 14) iMultiple = 14;

var iPosX, iPosY; //放大图对应显示区域左上角的坐标

var iMouseX = event.offsetX; //鼠标对应缩略图左上角的横坐标

var iMouseY = event.offsetY; //鼠标对应缩略图左上角的纵坐标

var iBigImgWidth = src.clientWidth * iMultiple; //放大图宽度，是缩略图的宽度乘以放大倍数

var iBigImgHeight = src.clientHeight * iMultiple; //放大图高度，是缩略图的高度乘以放大倍数

if (iBigImgWidth <= iDivWidth)

{

iPosX = (iDivWidth - iBigImgWidth) / 2;

}

else

{

if ((iMouseX * iMultiple) <= (iDivWidth / 2))

{

iPosX = 0;

}

else

{

if (((src.clientWidth - iMouseX) * iMultiple) <= (iDivWidth / 2))

{

iPosX = -(iBigImgWidth - iDivWidth);

}

else

{

iPosX = -(iMouseX * iMultiple - iDivWidth / 2);

}

if (iBigImgHeight <= iDivHeight)

{

iPosY = (iDivHeight - iBigImgHeight) / 2;

}

else

{

if ((iMouseY * iMultiple) <= (iDivHeight / 2))

{

iPosY = 0;

}

else

{

if (((src.clientHeight - iMouseY) * iMultiple) <= (iDivHeight / 2))

{

iPosY = -(iBigImgHeight - iDivHeight);

}

else

{

iPosY = -(iMouseY * iMultiple - iDivHeight / 2);

}

div1.style.height = iDivHeight;

div1.style.width = iDivWidth;

if (div1.innerHTML == "")

{

div1.innerHTML = "<img id=BigImg style='position:relative'>";

BigImg.src = "图片地址" + sFileName;

}

BigImg.width = iBigImgWidth;

BigImg.height = iBigImgHeight;

BigImg.style.top = iPosY;

BigImg.style.left = iPosX;

}

</script>

</head>

<body>

<p></p>

<tr>

<tr>

<marquee scrolldelay="120" width="80%"><font size="2">将鼠标移入标本图中，右方显示局部放大图；单击鼠标左键，可以增大放大倍数；鼠标单击时同时按Ctrl键则减小放大倍数。</font></marquee><br>

</td>

</tr>

</table>

</td>

<tr>

</div>

</td>

</tr>

</table>

</td>

</tr>

</table>

<p></p>

</body>

</html>
本文来自：网站制作学习网（http://www.forasp.cn），详细出处参考:http://www.forasp.cn/html/1395.html