javascript放大镜效果

先看效果：

 

javascript放大镜效果在博客园里面已经有不少同行做过了，我这篇随笔其实也是大量参考了他们的代码，特别是Hellen.Li 博客《JavaScript图片放大镜效果》的代码，写得非常好，我主要也是以它的代码为蓝本加以改进，对其在chrome的bug做了改正。同时取消了对怪异模式的兼容（个人觉得没必要），对mouseout的问题也用了另外一套解决方法，不能说优化，只是这种做法个人比较容易理解。

1，关于mouseout问题：

当鼠标从div中移开的时候会触发onmouseout事件，但是当我们移到div中的元素时，即子元素，也会触发onmousout事件。也就是说，移到对象的子对象上，也算onmouseout了。这往往会让我们预期的效果达不到。这次在放大镜效果的代码中就遇到这个问题。我在网上查到一个比较好的解决方法：

?

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < html xmlns="http://www.w3.org/1999/xhtml">< head > < meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> < title >橡树小屋</ title ></ head >< body > < script type="text/javascript"> function test(obj, e) {      //火狐，opera专用，e.currentTarget是火狐，opera专用的属性 alert(e.currentTarget); if (e.currentTarget) {      //relatedTarget对于 mouseout 事件来说，该属性是离开目标时，鼠标指针进入的节点。      //e.relatedTarget != obj，当移入子元素的时候，会出现相等      if (e.relatedTarget != obj) {          if (obj != e.relatedTarget.parentNode) {              alert(1);          }      }   //ie专用 } else {     if (e.toElement != obj) {          if (obj != e.toElement.parentNode) {           alert(1);          }}} } </ script > < div onmouseout="test(this, event)" style="width:100px;height:100px;border:1px #666 solid"> < span style="margin:5px;width:100%;height:100%;border:1px #ff0000 solid">橡树小屋</ span > </ div ></ body ></ html >

此代码在放大镜效果中有应用到。

2，关于其中的可用性优化

当鼠标移出图像的时候，图像马上消失，这种消失的突然令人感觉不够舒服，特别是当图像像上面那么小的时候，可用性不好，本来我加了白色的背景border作为缓冲，当鼠标移出图像，如果还在图片周围5像素之内，大图像仍然会保留不消失，这样一个简单的过渡，体验更好些。在实际编写代码的时候，发现IE浏览器对border的mouseover事件效率不是很高，如果鼠标快速移出图片，大图有时不消失，当然还有其他因素，例如事件浮升等等影响，后来调试了很久也没有很好的解决方案，关于这个问题，有机会再另外总结一遍吧。

3，如何调用

HTML代码的格式应该如下，其实跟Hellen.Li 原来的架构基本一样，只是内部代码调整过而已：

?

//外面包裹一个相对定位或绝对定位的div，不能有padding， < div style="position:relative;border:5px solid #FFF; float:left; margin-left:400px;"> < img src="1.jpg" class="zoom" big="1.jpg" /> </ div >

添加class=“zoom”，big="1.jpg"是大图的地址。

用 zoom({width:300,height:300});来调用，可以添加下面几个参数：

?

1 2 3 4 5

width:200, //大图的宽度 height:200, //大图的高度 offset:20,  //大图的偏移量 float: 'right' , //大图在左边还是右边 minWidth:100  //当窗口缩小，大图最小的宽度，如果小于minWidth,则移到左边

添加css：

?

1 2 3

#zoomdiv{ position : absolute ; background : #ffffff ; border : 1px solid #CCCCCC ; display : none ; text-align : center ; overflow : hidden ;} #zoomup{ position : absolute ; background : #c0c0c0 ; display : none ;filter:alpha(opacity= 50 );opacity:. 5 ; cursor : move ;} .zoom{ position : relative ; width : 100px ; vertical-align : bottom ; /*处理IE bug*/ }

然后导入lens.js文件，就可以观察到javascript放大镜的效果了。下面是lens.js的代码内容：

 /**************************************************
* Drag.js beta1
* 作者：橡树小屋 08.05.2010
* http://www.cnblogs.com/babyzone2004/
* 用法：zoom({width:300,height:300}); width,height是放大显示的区域
**************************************************/


//定义所有的变量，方法
var zoom = function(o){
    var d = document,
    db=document.body,
    timgs=d.getElementsByTagName('img'),
    opt = {
        width:200,
        height:200,
        offset:20,
        float:'right',
        minWidth:100
        },
       div = d.createElement('div'),
       divup = d.createElement('div'),
    //获取元素的定位,x,y
       getXY = function(el){
    var r={t:0,l:0},
        ua = navigator.userAgent.toLowerCase(),
        add = function(t,l){r.l+=l,r.t+=t},
        p = el;
        if(el&&el!=db){
        //el.getBoundingClientRect,获得元素的左，上，右和下分别相对浏览器视窗的位置
        if(el.getBoundingClientRect){
        var b = el.getBoundingClientRect();
        add(b.top + Math.max(d.body.scrollTop,d.documentElement.scrollTop),
            b.left+Math.max(d.body.scrollLeft,d.documentElement.scrollLeft));
        add(-d.documentElement.clientTop,-d.documentElement.clientLeft);
             }else{
                while(p){
                    add(p.offsetTop,p.offsetLeft);
                    p = p.offsetParent;
                }
                p = el.parentNode;
                while (p && p != db) {
                    add(-p.scrollTop,-p.scrollLeft);
                    p = p.parentNode;
                }
            }
        }
           return r;
       },
    //重新设置div的宽高
       extend = function(t,s){
          for(var p in s){
        t[p] = s[p];
        };
       };
  
       div.id='zoomdiv',divup.id = 'zoomup';
       div.innerHTML = '<img id="bigimg" src="" />';
       db.appendChild(div);
       extend(opt,o);
       function leave(obj,e){
        var e=e||event;
        /*alert(obj);
        alert(e.currentTarget);*/
        //火狐，opera专用，e.currentTarget是火狐，opera专用的属性
        if (e.currentTarget) {
            //relatedTarget对于 mouseout 事件来说，该属性是离开目标时，鼠标指针进入的节点。
            //e.relatedTarget != obj，当移入子元素的时候，会出现相等
            if (e.relatedTarget != obj) {
                if (obj != e.relatedTarget.parentNode) {
                    div.style.display = divup.style.display = 'none';
                    db.onmousemove = null;
                }
            }
        } else {//ie专用
            if (e.toElement != obj) {
                if (obj != e.toElement.parentNode) {
                    div.style.display = divup.style.display = 'none';
                    db.onmousemove = null;
                }
            }
        }
           };
       
       for(var i=0,ci;ci=timgs[i++];){
        if(ci.className=='zoom'){
            ci.onmouseover = function(e){
                 this.parentNode.appendChild(divup);
                 var bimg=d.getElementById('bigimg'),bwidth,bheight,sx,sy,
                   width = this.offsetWidth,
                height = this.offsetHeight,
                top=getXY(this).t,
                left = getXY(this).l,
                tWidth,tLeft,sWidth;
                //当鼠标移过的时候，开始载入大图
                bimg.src = this.getAttribute('big');
                   
                if(!bimg.complete){
                    bimg.onload=showBimg;
                }else{
                    showBimg();
                    }
                  function showBimg(){
                    div.style.display = 'block';
                    bwidth = bimg.width,
                    bheight = bimg.height,
                       sx = bwidth/width,sy = bheight/height;
                    tLeft =opt.float=='right'?opt.offset+width+left:left-opt.offset-opt.width,           
                    sWidth = window.innerWidth||(d.documentElement.clientWidth);
                    //如果浏览器宽度不够，则自动适应显示div的宽度
                    if(tLeft+opt.width+5>sWidth){
                        tWidth = sWidth - 5 - tLeft;
                        //此句式比较特殊
                        tWidth<opt.minWidth&&(tLeft = left-opt.offset-opt.width,tWidth=0);
                        };
                    //设置div,divup的宽高和位置
                    extend(div.style,{
                        left:tLeft +'px',
                        top:top+'px',
                        width:(tWidth||opt.width)+'px',
                           height:opt.height+'px'
                           });
                       extend(divup.style,{
                        width:(tWidth||opt.width)/sx+'px',
                        height:opt.height/sy+'px',
                           display:'block'
                          });
                       db.onmousemove = function(e){
                        var e = e || event,
                        //显示非IE的鼠标位置，然后是IE的
                        x=e.pageX||(e.clientX+(d.documentElement.scrollLeft||db.scrollLeft)),
                        y=e.pageY||(e.clientY+(d.documentElement.scrollTop||db.scrollTop)),
                        //X,Y相对于原始图片的位置
                        scrolly = y - divup.offsetHeight/2 - top,
                        scrollx = x - divup.offsetWidth/2 - left;
                        //如果鼠标接近边界的时候，相对位置将不再随鼠标发生变化

                        scrolly = y - divup.offsetHeight/2 < top ? 0 : y + divup.offsetHeight/2>height+top ? height - divup.offsetHeight  : scrolly;
                        scrollx = x - divup.offsetWidth/2 < left ? 0 : x + divup.offsetWidth/2>width+left ? width - divup.offsetWidth  : scrollx;
                        div.scrollTop = scrolly*sy;
                        div.scrollLeft =  scrollx*sx;
                        extend(divup.style,{top:scrolly+'px',left:scrollx+'px'});
                       }
                  };
             };
        ci.parentNode.onmouseout =function(event){leave(this,event)};
        }
      };   
}

附件源码：javascript放大镜效果 修正版

PS:感谢cdboy的提醒。

参考资料：

lulu Studio：javascript onmouseout问题解决方案

Hellen.Li ：JavaScript图片放大镜效果

 

《javascript放大镜效果》

BY 

橡树小屋

 from  http://www.cnblogs.com/babyzone2004/

本文地址： http://www.cnblogs.com/babyzone2004/archive/2010/08/05/1793451.html

   
   

    
    转自：
    
    http://www.cnblogs.com/babyzone2004/archive/2010/08/05/1793451.html