转载 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();
    });
});

　　

 

posted @ 2018-11-23 11:29  小白827  阅读(177)  评论(0)  编辑  收藏  举报