放大镜

放大镜

放大镜思路

• 鼠标移入小图像:
  放大镜元素显示（display）放大的图片显示（display）
• 鼠标移出小图像:
  放大镜元素隐藏（display）放大的图片隐藏（display）
• 鼠标在小图像中移动:
  放大镜跟随、边界限制、放大图片的元素的子标签（img图片放大）、反向等比移动大图片（超出父元素部分隐藏）

放大镜细节处理

元素绑定position属性、display属性、overflow属性；js代码中“px”不要遗忘

	window.onload = function () {

	//获取元素
	var Box = document.getElementById("Box"); // 正常图
	var bigBox = document.getElementById("bigBox"); // 放大的图
	var lay = document.getElementById("lay"); // 镜子
    var bigImg = bigBox.children[0];

    //当鼠标移入时Box时
    Box.onmouseover = function (ev) {
        lay.style.display = "block";
        bigBox.style.display = "block";
    }
    //鼠标移出 Box的时候
    Box.onmouseout = function (ev) {
        lay.style.display = "none";
        bigBox.style.display = "none";
    }

    //鼠标移动时
    Box.onmousemove = function (ev) {
         var ev = ev || window.event; //事件源的兼容问题
         var scale = 4;  //图片的放大比例

         //设置放大镜的宽高
         lay.style.width = parseInt(Box.offsetWidth / scale) + "px";
         lay.style.height = parseInt(Box.offsetHeight / scale) + "px";

         //将鼠标放到 放大镜的正中间
          var x = ev.clientX - lay.offsetWidth / 2;
          var y = ev.clientY - lay.offsetHeight / 2;

          if(x < 0){
             x = 0; // 左边界的判断，当超出时,置为0
          }
          //右边界的判断
          if(x >= Box.offsetWidth - lay.offsetWidth){
             x = Box.offsetWidth - lay.offsetWidth;
          }
          //上边界的判断
          if(y < 0){
             y = 0;
          }
          //下边界的判断
          if(y >= Box.offsetHeight - lay.offsetHeight){
          	y = Box.offsetHeight - lay.offsetHeight;
	      }
          lay.style.left = x + "px";
          lay.style.top = y + "px";

          //设置一下大图片
          bigImg.style.width = Box.offsetWidth * scale + "px";
          bigImg.style.height = Box.offsetHeight * scale +　"px";

          //同等比例移动
          var left = lay.offsetLeft * scale;
          var top = lay.offsetTop * scale;

          //大图的移动，  和放大镜 反向
          bigImg.style.marginLeft = (left*(-1)) + "px";
          bigImg.style.marginTop = -top + "px";

		}

	}

• 点赞
• 收藏
• 分享
• • 文章举报

Mrqin-shen 发布了36 篇原创文章 · 获赞 0 · 访问量 913 私信 关注

标签：Box,style,放大镜,px,lay,var,display
来源： https://blog.csdn.net/qinshensx/article/details/104130604