jQuery实现简单的图片放大镜

最新推荐文章于 2021-06-24 16:28:06 发布

汐

最新推荐文章于 2021-06-24 16:28:06 发布

阅读量350

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_41104279/article/details/88255539

本文介绍了一种使用jQuery实现的简单图片放大镜效果。通过监听鼠标移入、移出及移动事件，动态调整放大镜视图的位置，实现图片局部放大的交互体验。此功能增强了网页的用户体验，适用于产品展示等场景。

jQuery实现简单的图片放大镜

<script src="../jQuery/jquery.min.js"></script>

</div>

<script>
   
   // 移入事件
    $("#box").mouseover(function(){
        // 鼠标移到图片上；放大镜显示出来；
        $("#view").css("display","block");
    });
    // 移出事件
    $("#box").mouseout(function(){
        // 当鼠标移出图片，放大镜自动隐藏；
       $("#view").css("display","none");
    });
    $("#box").mousemove(function(e){
        $("#view").css("left",function(){
            return e.clientX-75+'px';
        })
        $("#view").css("top",function(){
            return e.clientY - 75 + 'px';
        });
        // 获取id 为view 的第一个子元素；并聚焦调整放大镜的放大倍数；
        $("#view").children().eq(0).css("left",function(){
            return -e.clientX*2+75 + 'px';
        });
        $("#view").children().eq(0).css("top",function(){
            return -e.clientY*2+75+'px';
        });
        
    });
</script>