Javascript制作放大镜效果_Javascript教程_H5之家 - 中国HTML5教程资源分享第一站

写了个简单的放大镜功能，
功能
width 大图的宽可选默认200
   height 大图的高可选默认200
   bigUrl 大图的url 必须的
   id 小图的大小必须的
   float 左边还是右边显示可选默认的是右边 'right' or 'left'
   offset 大图距离小图的偏移量可选默认20
支持多个图放大

支持
ie 6-8
ff3.5 -3.6
chrome

修正图片加载慢时的问题
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="content-type" content="text/html;charset=gbk" />
<title>放大镜</title>
<style>
.zoomdiv{
  position: absolute;
  background: #ffffff;
  border:1px solid #CCCCCC;
  display:none;
  text-align: center;
  overflow: hidden;
   }
.zoomup{
  background:#c0c0c0;
  display:none;
  filter:alpha(opacity=50);
  opacity:.5;
  cursor:move;
  position:absolute;
  top:0;
  left:0;
}

</style>
</head>
<body>
<div style="position:absolute;border:1px solid #c0c0c0;left:50px;"><img src="" id="small"/></div>
<div style="position:absolute;border:1px solid #c0c0c0;left:600px;"><img src="" id="small1"/></div>
</body>
</html>
<script>
   function zoom(o){
  var d = document,db = document.body,dd = d.documentElement,ie = !+'\v1',div,divup,img = d.getElementById(o.id),loaded=0,timer,
    imgTL=getTL(img),top=imgTL.t,left = imgTL.l,sx,sy,opt = {width:200,height:200,offset:20};
  //创建元素
  function creElm(o,pN,t){
   var tmp = d.createElement(t||'div');
   for(var p in o){
    tmp[p] = o[p];
   }
   return pN?pN.appendChild(tmp):db.appendChild(tmp);
  };
  //得带元素偏移量
  function getTL(el){
   var b = el.getBoundingClientRect();
   //html4.01解析用db
   return {
    'l': b.left + dd.scrollLeft - dd.clientLeft,
    't': b.top + dd.scrollTop - dd.clientTop
   }
  };
  function extend(t,s){
   for(var p in s){
    t[p] = s[p];
   };
  };
  //离开时清掉
  function leave(){
   //清理mouseover上的时间戳
   clearTimeout(timer);
   div.style.display = divup.style.display = 'none';
   ie?db.detachEvent('onmousemove',move):db.removeEventListener('mousemove',move,false)
  };
  function move(e){
   var e = e || event,x=e.pageX||e.clientX+dd.scrollLeft,y=e.pageY||e.clientY+dd.scrollTop,
    scrolly = y - divup.offsetHeight/2 - top,scrollx = x - divup.offsetWidth/2 - left;
   scrolly = y - divup.offsetHeight/2 < top ? 0 : y + divup.offsetHeight/2>img.height+top ? img.height - divup.offsetHeight : scrolly;
   scrollx = x - divup.offsetWidth/2 < left ? 0 : x + divup.offsetWidth/2>img.width+left ? img.width - divup.offsetWidth : scrollx;
   div.scrollTop = scrolly*sy;div.scrollLeft = scrollx*sx;
   extend(divup.style,{top:scrolly+'px',left:scrollx+'px'});
  }
  if(img){
   extend(opt,o);
   //创建大图的容器
   div = creElm({className:'zoomdiv'});
   //创建在小图上的浮层
   divup = creElm({className:'zoomup'},img.parentNode);
   creElm({onload:function(){
    //ie下隐藏时width/height看不到问题
    div.style.display = 'block'
    var bwidth = this.width,bheight = this.height;
    //大图和小图的比例
    sx = bwidth/img.width,sy = bheight/img.height;
    extend(divup.style,{
     width:opt.width/sx+'px',
     height:opt.height/sy+'px'
    })
    extend(div.style,{
     left:(!opt.float?opt.offset+img.width+left:left-opt.offset-opt.width) +'px',
     top:top+'px',
     width:opt.width+'px',
     height:opt.height+'px',
     display:'none'
    });
    loaded = 1;
   },src:opt.bigUrl},div,'img');
   img.onmouseover = function(){
    if(loaded){
     div.style.display = divup.style.display = 'block';
     ie?db.attachEvent('onmousemove',move):db.addEventListener('mousemove',move,false);
    }else{
     timer = setTimeout(arguments.callee,100);
    }

   };
   img.parentNode[ie?'onmouseleave':'onmouseout'] = ie?leave:function(e){
    !(this===e.relatedTarget||(this.contains?this.contains(e.relatedTarget):this.compareDocumentPosition(e.relatedTarget)==20))&&leave();
   }
  }

   }
   /*
   width 大图的宽可选默认200
   height 大图的高可选默认200
   bigUrl 大图的url 必须的
   id 小图的id 必须的
   float 左边还是右边显示可选默认的是右边 'right' or 'left'
   offset 大图距离小图的偏移量可选默认20
   */
zoom({
  id:'small',
  bigUrl:'http://i757.photobucket.com/albums/xx213/campaignZH/shoe2_big.jpg',
  offset:50
});
zoom({
  id:'small1',
  bigUrl:'http://img.qihoo.com/images/2008/hao360/20100421/big.jpg',
  float:'left',
  width:300,
  height:300
});

</script>