JS插件-放大镜效果

放大镜插件

• 先上效果图（同淘宝宝贝放大部分）
  
• 总体可细分为三个div，右边大box，左上中box，左下小box
  
• 鼠标移至small-lbox，相应的选项增加边框，middle-box也会改变

主要代码

• 先从small-box开始，有鼠标移入、移出事件，移入事件跟随着middle-box中img的改变、相应的small-box加边框（所有的small-box先去除边框）

   var osmallbox = $("small-box");
   osmallimgs = osmallbox.getElementsByTagName("img");
   for (var i = 0; i < osmallimgs.length; i++) {
       osmallimgs[i].onmouseenter = function() {
           for (var j = 0; j < osmallimgs.length; j++) {
               osmallimgs[j].className = "";
           }
           this.className = "current";
           //修改中型图片、大型图片的SRC地址
           omiddleimg.src = "./imgs/middle" + this.src.slice(this.src.indexOf('-'));
           olargeimg.src = "./imgs/large" + this.src.slice(this.src.indexOf('-'));

       };
   }

• middle-box关键步骤，鼠标移入、移出，移入事件跟随着遮罩层出现、big-box出现，遮罩层出现包括鼠标定位，上下左右边界限定

//鼠标进入middle-box，显示遮罩层和大型图片
   $("middle-box").onmouseenter = function() {
       $("large-box").style.display = "block";
       $("float").style.display = "block";
   }

   //鼠标离开middle-box，不显示遮罩层和大型图片
   $("middle-box").onmouseout = function() {
       $("large-box").style.display = "none";
       $("float").style.display = "none";
   }

   //添加鼠标移动事件
   $("middle-box").onmousemove = function(evt) {
       $("float").style.display = "block";
       var evt = evt || window.event;
       var l = $("box").offsetLeft;
       var t = $("box").offsetTop;
       var x = evt.clientX - $("float").offsetWidth / 2 - l;
       var y = evt.clientY - $("float").offsetHeight / 2 - t;
       if (x < 0) {
           x = 0;
       }
       if (y < 0) {
           y = 0;
       }
       if (x > $("middle-box").offsetWidth - $("float").offsetWidth) {
           x = $("middle-box").offsetWidth - $("float").offsetWidth;
       }
       if (y > $("middle-box").offsetHeight - $("float").offsetHeight) {
           y = $("middle-box").offsetHeight - $("float").offsetHeight;
       }
       $("float").style.left = x + "px";
       $("float").style.top = y + "px";
       //定义box-img显示比例
       var lx = x / ($("mask").offsetWidth - $("float").offsetWidth);
       var ly = y / ($("mask").offsetHeight - $("float").offsetHeight);
       $("large-img").style.left = -lx * ($("large-img").offsetWidth - $("large-box").offsetWidth) + "px";
       $("large-img").style.top = -ly * ($("large-img").offsetHeight - $("large-box").offsetHeight) + "px";
   }

• big-box部分比较简单，只有当鼠标移入middle-box时才显示，但big-img的显示有个比例进行部分显示，具体代码参照上面倒数四行。