转载 jQuery实现放大镜特效-优快云博客

本文介绍了一种使用HTML、CSS和jQuery实现的图片放大镜效果。通过鼠标移动，可以实时预览图片放大部分，增强了用户体验。文章详细展示了如何设置图片和放大镜的位置，以及如何调整放大镜中图片的显示。

效果图。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #fang{
                position: absolute;
                width: 100px;
                height: 100px;
                border-radius: 50px;
                background-color: cornflowerblue;
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="test1">
            <img src="img/panda.jpg"width="800px"/>
            <div id="fang">
                
            </div>
        </div>
        <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="test_2.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

Jquery代码

$(function(){
    //获得图片离浏览器顶端的距离
    var top=$("#test1 img").position().top;
    //获得图片离浏览器左端的距离
    var left=$("#test1 img").position().left;
    //鼠标在图片内部移动
    $("#test1 img").mousemove(function(e){
        $("#fang").css({
            //此时鼠标的位置
            "top":e.clientY+20+"px",
            "left":e.clientX+20+"px",
            //放大镜中的图片
            "background-image":"url(img/panda.jpg)",
            "background-size":"800px 450px",
            "background-repeat":"no-repeat",
            //调整放大镜中的图片的位置
            "background-position":"-"+(e.clientX-left-51)+"px -"+(e.clientY-top-48)+"px",
            //放大图片
            "transform":"scale(1.5,1.5)"
        });
    });
    //鼠标移进图片时显示放大镜
    $("#test1 img").mouseenter(function(){
        $("#fang").show();
    });
    //鼠标移出图片时隐藏放大镜
    $("#test1 img").mouseout(function(){
        $("#fang").hide();
    });
});

转载于:https://www.cnblogs.com/pegasus827/p/10006488.html