主要功能:实现点击小图查看大图。
首先打开一个界面
window.showModalDialog("<%=thisPath%>/jsp/showPic.jsp",dir,"dialogHeight:" + screen.height+ ";dialogWidth:" + screen.width+ ";help:no;status:no");
将图片链接导入到页面中
<%@ page language="java" contentType="text/html;charset=GBK"%>
<html>
<head>
<title>图片详情</title>
<meta http-equiv="Expires" CONTENT="0">
<meta http-equiv="Cache-Control" CONTENT="no-cache">
<meta http-equiv="Pragma" CONTENT="no-cache">
</head>
<body>
<div Style="position:relative" ID="imgDiv">
<script>
var dir = window.dialogArguments;
document.write("<img src='"+dir+"' id='img2' align=middle Style='CONTAINER:positioned;position:absolute;' onmousewheel='return bigimg(this)' onmouseup = clear2() onMouseMove=imgMove()></span><br>");
</script>
</div>
</body>
<script language="javascript">
function bigimg(i)
{
var zoom = parseInt(i.style.zoom,10)||100;
zoom += event.wheelDelta / 12;
if(zoom > 0 )
i.style.zoom=zoom+'%';
return false;
}
var temp = 0;
var temp_y = 0;
function imgMove()
{
//if the left button was not pressed,return
if(window.event.button!= 1)
{
return 0;
}
//get the new position
with(window.event.srcElement.style)
{
/* x1:鼠标坐标x y1 :鼠标坐标y1 */
var x1 = window.event.x;
var y1 = window.event.y;
/* 图像位置 */
var x2 = document.all.img2.offsetLeft;
var y2 = document.all.img2.offsetTop;
if(temp!= 0 & temp_y!=0){
pixelLeft = window.event.x-temp;
pixelTop = window.event.y-temp_y;
}else{
/* 计算鼠标点距离图像左上角点的位置 */
temp =x1-x2;
temp_y = y1-y2;
}
}
window.event.returnValue=false;
}
/* 当鼠标弹起后,将变量置为空 */
function clear2(){
temp = 0;
temp_y = 0;
}
</script>
</html>