IDC资讯中心 javascript实现图片局部放大效果，通常在商城网站的产品详细页中见到这种效果，具体代码：
<html>
<head>
<title>javascript实现图片局部放大效果</title>
<script language=”javascript” type=”text/javascript”>
function fnViewMove(oEvent)
{
var view=document.getElementById(“view”);
var biga=document.getElementById(“biga”);
var viewTop=view.style.top;
var viewLeft=view.style.left;
//var oEvent=oEvent?oEvent:(window.event?window.event:null);
//因为event不能在FF上运行，只能在事件发生现场上使用，所以也可以用以上代码
if(window.event)
{
oEvent=window.event;
}
else
{
oEvent=arguments[0];
}
if(window.event&&!window.event.pageX)//Opera中可以触发event,但是其事件包含pageX属性，故不能对其重新定义
{
oEvent.pageX=oEvent.clientX+document.body.scrollLeft;
oEvent.pageY=oEvent.clientY+document.body.scrollTop;
}
view.style.top=oEvent.pageY-50;
view.style.left=oEvent.pageX-66;
if(parseFloat(view.style.top)<=0)
{
view.style.top=0+”px”;
}
if(parseFloat(view.style.left)<=0)
{
view.style.left=0+”px”;
}
if(parseFloat(view.style.top)>=98)
{
view.style.top=98+”px”;
}
if(parseFloat(view.style.left)>=132)
{
view.style.left=132+”px”;
}
view.innerHTML=viewTop+”;”+viewLeft;
biga.scrollLeft=parseFloat(viewLeft)*3;
biga.scrollTop=parseFloat(viewTop)*3;
}
</script>
</head>
<body>
<div onMouseMove=”fnViewMove(event)” style=”width:267px; height:200px; border:solid 2px #000000; float:left; position:relative; overflow:hidden;”>
<img style=”width:267px; height:200px;”src=”/pic/800_03.JPG” />
<div id=”view” style=”width:133px; height:100px; border:solid 1px #ffffff; overflow:hidden; position:absolute; float:left; left: 0px; top: 0px;”></div>
</div>
<div id=”biga” style=”width:533px; height:400px; border:solid 2px #000000; float:right; overflow:hidden;”>
<img src=”/pic/800_03.JPG” />
</div>
</body>
</html>
javascript实现图片局部放大效果
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com 特别注意：本站所有转载文章言论不代表本站观点！ 本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。未经允许不得转载：IDC资讯中心 » javascript实现图片局部放大效果
