JQUERY实现鼠标悬停在图片上模拟放大镜效果

Bertha 。 2022-06-15 21:06 312阅读 0赞

在很多网页上特别是电商网站上我们经常看到当我们的鼠标悬停在某张图片上时会有类似放大镜的效果，老规矩，放上效果图：  
![这里写图片描述][SouthEast]  
HTML代码：

CSS代码：

*{ margin:0;padding:0; }
        #normal{ position:relative; width:300px; height:200px; border:1px solid #000; }
        #normal img{ width:100%; height:100%; }
        #show{ width:50px; height:50px; background:#FF0; opacity:0.3; position:absolute; top:0;right:0; cursor:move; display:none; }
        #big{ width:300px; height:200px; overflow:hidden; position:relative; padding:10px; margin:10px; }
        #big>img{ position:absolute; top:0;left:0; width:1200px; height:800px; }

JS代码：

$(function(){ 
    
        $('#normal').mouseover(function(){ 
    
            //鼠标移入"显示"方块
            $('#show').show();
            $(this).mousemove(function(ev){ 
    
                //鼠标移动方块随着移动
                $('#show').css({
    
                    'left':ev.pageX-$('#show').width()/2,
                    'top':ev.pageY-$('#show').height()/2
    
                })
    
                //防止方块移出图片内容 
                if($('#show').offset().top>$(this).height()-$('#show').height()){
    
                    $('#show').css('top',$(this).height()-$('#show').height());
    
                }else if($('#show').offset().left>$(this).width()-$('#show').width()){
    
                    $('#show').css('left',$(this).width()-$('#show').width());
    
                }else if($('#show').offset().bottom>$(this).height()-$('#show').height()){
    
                    $('#show').css('bottom',$(this).height()-$('#show').height());
    
                }else if($('#show').offset().right>$(this).width()-$('#show').width()){
    
                    $('#show').css('right',$(this).width()-$('#show').width());
    
                }
    
                //在大容器显示放大图片
                $('#big').find('img').css({
    
                    'left':-1200*$('#show').offset().left/300,
                    'top':-800*$('#show').offset().top/200
    
                });
    
            });
    
    
        });
    
        //鼠标移出图片让方块"消失"
        $('#normal').mouseout(function(){ 
    
            $('#show').hide(); 
    
        });
    
    });

[SouthEast]: /images/20220616/da43058da60f43ac91cea35ec3dd3b4a.png