jquery实现放大镜效果

效果图：

html代码：

<!--放大镜-->
        <div class="box">
                <div class="smallBox">
                    <img src="img/7_418x418.jpg"/>
                    <span class="lay"></span>
                </div>
                <div class="bigBox">
                    <img src="img/7_800x800.jpg"/>
                </div>
        </div>

css代码：

/*放大镜*/
.box{width:418px;height:418px;position: relative;}
.smallBox{width:418px;height:418px;position: relative;border:1px solid gray;cursor: move;}
.bigBox{width:418px;height:418px;position: absolute;top:0;left:420px;overflow: hidden;display:none;border: 1px solid gray;}
.smallBox .lay{background:#fff;border:1px solid gray;position: absolute;top:0;left: 0;opacity:0.5;display:none;width: 150px;height: 150px;}

 

js代码：

$ (function(){
	//当鼠标划上小图，遮罩层和大图显示
	$(".smallBox").mouseover(function(){
    	$(".smallBox span").show();
    	$(".bigBox").show();
    	//当鼠标划出小图，遮罩层和大图隐藏
    }).mouseout(function(){
   		$(".smallBox span").hide();
    	$(".bigBox").hide();
    }).mousemove(function(){
    	// 一、首先实现“放大镜”框跟随鼠标移动的功能（我们让鼠标处于“放大镜”框的中心）
    	
            // 获取鼠标当前位置
            var pageX =event.pageX;//鼠标到文档头部距离
            var pageY = event.pageY;//鼠标到文档左侧距离
            
            // 获取“小图”窗口在整个文档中的偏移位置
            var offsetX = $('.smallBox').offset().left;//当前元素到左侧距离
            var offsetY = $('.smallBox').offset().top;//当前元素到头部距离
            // 计算鼠标在小图中的相对位置
            var relativeX = pageX - offsetX;
            var relativeY = pageY - offsetY;
            
            // 考虑到鼠标处于“放大镜”框的中心，我们要根据鼠标位置计算“放大镜”框的位置
            var magOffsetX = $('.lay').width() / 2;//遮罩层宽的一半
            var magOffsetY = $('.lay').height() / 2;//遮罩层高的一半
                       
            var left1 = relativeX - magOffsetX;
            var top1 = relativeY - magOffsetY;
            
            $('.lay').css({
            	left: left1 + 'px',
                top: top1 + 'px' 
            });
                          
          // 二、处理越界情况  
            // 确定边界
            var maxMagX = $('.smallBox').width() - $('.lay').width();
            var maxMagY = $('.smallBox').height() - $('.lay').height();
            // 左边界
            if (left1 <= 0) {
            	left1 = 0; 
            	$('.lay').css('left', '0px'); }
            // 右边界
            if (left1 >= maxMagX) {
            	left1 = maxMagX;
            	$('.lay').css('left', maxMagX + 'px'); }
            // 上边界
            if (top1 <= 0) {
            	top1 = 0; 
            	$('.lay').css('top', '0px'); }
            // 下边界
            if (top1 >= maxMagY) {
            	top1 = maxMagY; 
            	$('.lay').css('top', maxMagY + 'px'); }
                                  
            // 三、其次实现“原图”窗口中的图片随“放大镜”框的移动而相应移动   
            // 按照之前确定的缩放比例移动“原图”窗口中的图片
            // 图片的移动方向与鼠标的移动方向是相反的！
            var maxMagX2 = $('.bigBox img').width()-$('.bigBox').width();
            var maxMagY2 = $('.bigBox img').height()-$('.bigBox').height();
                       
            var left2 = left1/maxMagX *maxMagX2;
            var top2 = top1/maxMagY *maxMagY2;  
         	$('.bigBox img').css({ marginLeft: -left2 + 'px', marginTop: -top2 + 'px' });          
   	
    });
	
})

别忘了引入css,jquery库,和js哦！

        <link rel="stylesheet" href="css/glass.css" />
        <script type="text/javascript" src="js/jquery-3.3.1.js" ></script>        
        <script type="text/javascript" src="js/glass.js" ></script>

ok喽！