javascript实现图片局部放大效果-Javascript-技术教程-asp编程网

javascript实现图片局部放大效果

2009-04-21 21:07:53 来源：lueidea 作者：佚名浏览量:1919 收藏

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实现图片局部放大效果

最新相关教程

热门教程

推荐教程