放大镜特效疑惑

       鼠标悬浮小盒子，出现放大镜与大盒子，反之隐藏。

       鼠标移动，放大镜跟随移动，大图片跟随移动。

     

       先求出放大镜

    

    objSmallBox.onmouseout = funtion (ev) {

        var _event = ev || window.event;  

                    //兼容多个浏览器event参数模式

         left = _event.clientX — objDome.offsetLeft —  objSmallBoxoffsetLeft — objFloatBox.offsetWidth/2

  

         top = _event.clientY — objDome.offsetTop —  objSmallBox.offsetTop —  objFloatBox.offsetHeight/2

          objFloatBox.style.left = left + "px";

          objFloatBox.style.top = top + "px";

               //鼠标移动放大镜跟随鼠标移动

          var percentX = left / (objSmallBox.offsetWidth  -  objFloatBox.offsetWidth);

          var percentY = top / (objSmallBox.offsetHeight  -  objFloatBox.offsetHeight);

                 ① //求得在小盒子中放大镜水平垂直移动距离占小图片宽高减去放大镜宽高的百分比

           objBigBoxImage.style.left = percentX * (objBigBox.offsetWidth  -  objBigBoxImage.offsetWidth) +"px"

          objBigBoxImage.style.top = percentY * (objBigBox.offsetHeight  -  objBigBoxImage.offsetHeight) +"px"

     

              //大图片水平移动距离占大盒子图片宽度–  大盒子宽度的百分比与①的水平百分比相等

             //大图片垂直移动距离占大盒子图片高度–  大盒子高度的百分比与①的垂直百分比相等

                        

            //而要求大图片水平垂直移动距离，需要①的水平垂直百分比分别  *  (大盒子图片宽高 –大盒子宽高)的剩余宽度与高度。

        

   第二种百分比:大图宽/小图宽 =大图移动距离/left

        D / B = ? / X

  

     更变代码部分

             var percentX = objBigBoxImage.offsetWidth / objSmallBox.offsetWidth;

             var percentY = objBigBoxImage.offsetHeight / objSmallBox.offsetHeight;

             objBigBox.style.left = -percentX * left + "px";

             objBigBox.style.top = -percentY * top + "px";