一个简单的图片放大器效果

一个简单的图片放大效果:

参数说明:
1.berviary:String,需要被放大的图片id
2.expand:object,放大区域,如果不设置此项或者此项的id未设置,则默认为光标跟随模式,会自动创建用于显示放大区域的div.
3.clip:object,裁剪区域的大小,即鼠标移动到需要放大的图片上时,突出显示需要被放的大区域
4.opacity:float,放大时图片被遮罩的区域的透明度

 

效果1:

调用的js代码:

$E({berviary:"currentPic",expand:{id:"expand",style:{}},clip:{width:"50px",height:"50px"},opacity:"0.2"});

 html代码:

  <div>

    <div class="img_warp" id="img_warp">

        <img src="1.jpg" alt="" class="current" id="currentPic" />

    </div>  

    <div class="expand" id="expand" style="border: 1px solid #555; width:400px; height:400px;margin:-200px auto 0 auto; overflow:hidden;"></div>

  </div>

 

 

---

 

效果2:

调用的js代码: 

$E({berviary:"currentPic",clip:{width:"100px",height:"100px"},opacity:"0.4"});

html代码: 

  <div>

    <div class="img_warp" id="img_warp">

        <img src="1.jpg" alt="" class="current" id="currentPic" />

    </div>

  </div>

 

 

 放大效果代码:

    var $E = function(opts){

      function _(objId){return (typeof objId === "string")?document.getElementById(objId):objId;}

      var beImg,expand,clip,cover,warp,expImg;

      var clipWidth,clipHeight;

      var closeTimeId = null;

      var mult  = 1;    //图片放大倍数,根据裁剪框和放大后图片容器的大小自动调整

      //init

      (function(){  

        beImg = _(opts.berviary);

        warp = beImg.parentNode;

        

        cover = document.createElement("div");

        warp.appendChild(cover);

        cover.style.position = "absolute";

        cover.style.top = "0px";

        cover.style.left = "0px";          

        cover.style.backgroundColor = "#ccc";

        var opac = parseFloat(opts.opacity) || 0.3;

        cover.style.opacity = opac;

        cover.style.filter = "Alpha(Opacity=" + opac * 100 + ")";

        cover.style.width = "100%";        

        cover.style.height = "100%";

        cover.style.zIndex = 2;

        cover.style.visibility = "hidden";

        

        clip = document.createElement("img");        

        warp.appendChild(clip);

        

        clipWidth = (opts.clip && opts.clip.width) || "60px";

        clipHeight = (opts.clip && opts.clip.height) || "60px";

        

        clip.src = beImg.src;

        clip.className = beImg.className;        

        clip.style.position = "absolute";

        clip.style.top = "0px";

        clip.style.left = "0px";

        clip.style.clip = "rect(0px," + clipWidth + "," + clipHeight + ",0px)";

        clip.style.backgroundColor = "#ccc";

        clip.style.zIndex = 3;

        

        //ie里面会变态的自动设置宽度和高度

        clip.removeAttribute("width");

        clip.removeAttribute("height");

      })();

      

      function layerPos(e){

        if(e.layerX && e.layerY){

          return {x:e.layerX,y:e.layerY};

        } else {

          return {x:e.x,y:e.y};

        }

      }

      

      function absolutePos(e){

        if(e.pageX && e.pageY){

          return {x:e.pageX,y:e.pageY};

        } else {

          var x = e.clientX + (document.documentElement.scrollLeft?document.documentElement.scrollLeft : document.body.scrollLeft);

          var y = e.clientY + (document.documentElement.scrollTop?document.documentElement.scrollTop : document.body.scrollTop);          

          return {x:x,y:y};

        }

      }

      

      var showExpand = function(x,y,e){

          if(!expand){

              initExpand();            

          }

          

          expImg.style.left = (-1 * x) * mult + "px";

          expImg.style.top = (-1 * y ) * mult + "px";

                    

          if((!opts.expand) || (!opts.expand.id)){

            var aPos = absolutePos(e);

            expand.style.left = aPos.x + parseFloat(clipWidth) / 2 + 20 + "px";

            expand.style.top = aPos.y + "px";

          }

          

          //初始化放大的div

          function initExpand(){

            if(opts.expand && opts.expand.id) {

              expand = _(opts.expand.id);

            } else {

              expand = document.createElement("div");

              if(opts.expand && opts.expand.style){

                for(var p in opts.expand.style){

                  expand.style[p] = opts.expand.style[p];

                }

              }

              expand.style.border = "1px solid #000";

              

              expand.style.position = "absolute";

              expand.style.left ="0";

              expand.style.right = "0";

              expand.style.display = "block";

              document.body.appendChild(expand);

              

              if(clip.clientWidth>clip.clientHeight){

                expand.style.width = clip.clientWidth + "px";

                expand.style.height = clip.clientWidth * parseFloat(clipHeight) / parseFloat(clipWidth) + "px";

              } else {

                expand.style.height = clip.clientHeight + "px";

                expand.style.width = clip.clientHeight * parseFloat(clipWidth) / parseFloat(clipHeight) + "px";

              }

              expand.style.zIndex = 4;

            }

            

            expand.style.overflow = "hidden";

            if((expand.style.position != "relative") && (expand.style.position != "absolute")){

              //变态的ie6和ie7的img如果为relative,需要设置其父节点也为relative,否则overflow:hidden无效

              expand.style.position = "relative";

              expand.style.left = "0";

              expand.style.top = "0";

            }

            expImg = document.createElement("img");

            expImg.src = beImg.src;

            expImg.style.position = "relative";

            expImg.style.left = "0px";

            expImg.style.top = "0px";

            expand.appendChild(expImg);



            expImg.removeAttribute("width");

            expImg.removeAttribute("height"); 

            

            //计算图片放大的倍数

            var ew = expand.clientWidth;

            var eh = expand.clientHeight;

            var cw = parseFloat(clipWidth);

            var ch = parseFloat(clipHeight);            

            mult =  (ew/cw < eh/ch) ? ew/cw : eh/ch;   

             

            //调整放大图片的大小

            expImg.style.width = beImg.clientWidth * mult + "px";

            expImg.style.height = beImg.clientHeight * mult + "px";          

          }

          

      }

      

      cover.onmousemove = clip.onmousemove = function(e){

        var e = e || event;

        var pos = layerPos(e);

        var x = pos.x;

        var y = pos.y;

        //判断x和y坐标有没有超出范围

        var w = parseFloat(clipWidth) / 2,h = parseFloat(clipHeight) / 2;

        

        x = (x < w)?w:x;

        y = (y < h)?h:y;

        x = (x > warp.clientWidth - w) ? (warp.clientWidth - w) : x;

        y = (y > warp.clientHeight - h) ? (warp.clientHeight - h) : y;

        clip.style.clip = "rect(" + (y - h) + "px," + (x + w) + "px," + (y + h) + "px," + (x - w) + "px)";

        showExpand(x - w,y - h,e);

      }



      warp.onmouseover = cover.onmouseover = clip.onmouseover = function(){

        //如果清除的定时器存在,则删除.

        if(closeTimeId){

          clearTimeout(closeTimeId);

          closeTimeId = null;

        }

        if(cover.style.visibility === "hidden"){

          cover.style.visibility = "visible";

        }

        if(expand && expand.style.display === "none"){

          expand.style.display = "block";

        }

      }

      

      warp.onmouseout = function(){

        //延迟一定时间后清除    

        closeTimeId = setTimeout(function(){

          cover.style.visibility = "hidden";

          

          if((!opts.expand) || (!opts.expand.id)){

            expand.style.display = "none";

          }

        },130);

      }

  

      return {

        clear:function(){

          //在这里清除放大镜效果

          warp.removeChild(clip);

          warp.removeChild(cover);

          warp.onmouseout = null;

          if((!opts.expand) || (!opts.expand.id)){

            expand.style.display = "none";

          }

        }

      }

    }