JS+CSS实现图片放大预览效果
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JS+CSS实现图片放大预览效果（js图片放大预览鼠标滑过的任意位置_365CSS.CN</title><script language="JavaScript"><!--var srcX = 1024; //原图大小,可以任意设置var srcY = 768;var bigX = 300; //预览窗大小,可以任意设置var bigY = 225;var smallX = 300; //缩略图宽度var smallY = srcY * smallX / srcX;var viewX = bigX / srcX * smallX; //预览范围var viewY = bigY / srcY * smallY;var bl = srcX / smallX;//缩小比例var border = 1; //边框window.onload=function (){ head.innerHTML="JS+CSS实现图片放大预览效果,鼠标可以滑动图片任意地方"; smallpic.width=smallX; smallpic.height=smallY; bigpic.width=srcX; bigpic.height=srcY; view.style.width=viewX; view.style.height=viewY; smallbox.style.borderWidth=border; bigbox.style.borderWidth=border; if (window.event){ smallbox.style.width=smallpic.offsetWidth+border*2; smallbox.style.height=smallpic.offsetHeight+border*2; bigbox.style.width=bigX+border*2; bigbox.style.height=bigY+border*2; }else{ smallbox.style.width=smallpic.offsetWidth; smallbox.style.height=smallpic.offsetHeight; bigbox.style.width=bigX; bigbox.style.height=bigY; } move(event);}function move(e){ var e = window.event?window.event:e; var iebug = 0; if (window.event){ var vX = e.offsetX - viewX/2; var vY = e.offsetY - viewY/2; }else{ var vX = e.pageX - viewX/2 - smallbox.offsetLeft - border; var vY = e.pageY - viewY/2 - smallbox.offsetTop - border; iebug = 2; } if (vX < 0) vX = 0; if (vY < 0) vY = 0; if (vX > smallX - viewX - iebug) vX = smallX - viewX - iebug; if (vY > smallY - viewY - iebug) vY = smallY - viewY - iebug; bigpico.style.marginLeft = - vX * bl bigpico.style.marginTop = - vY * bl view.style.left = vX + smallbox.offsetLeft + border; view.style.top = vY + smallbox.offsetTop + border;}//--></script><style type="text/css"><!--*{padding:0;margin:0}img{display:block;}#smallbox{border:1px #c33 solid;float:left;width:0;height:0;overflow:hidden}#bigbox{border:1px #c33 solid;width:0px;height:0px;float:left;overflow:hidden}#view{border:1px #ddd solid;width:0px;height:0px;position:absolute}#head{text-align:center;line-height:40px;font:bold 16px/40px;color:red}//--></style><div id="head"></div><div id="smallbox"><img src="1.jpg" name="smallpic" width="300" height="300" border="0" id="smallpic" onmousemove="move(event)" onmouseover="document.getElementById('bigbox'). style.display=''; document.getElementById('view'). style.display=''" onmouseout="document.getElementById('bigbox') .style.display='none'; document.getElementById('view'). style.display='none'"></div><div id="bigbox" style="display:none"> <div id="bigpico"> <img src="1.jpg" name="bigpic" width="300" height="300" border="0" id="bigpic"> </div></div><div id="view" onmousemove="move(event) "style="display:none"></div>