JQuery 鼠标移入图片移入放大功能 简易且明了

 

    /* 图片放大tooltip */

    #tooltip{

        position:absolute;

        border:1px solid #eeeeee;

        background:#eeeeee;

        padding:1px 1px 1px 1px;

        display:none;

    }

$(document).ready(function(){
                $(".content").on("mouseover","li",function(e){
                let src = $(this).children().children('img').attr('src')
                var tooltip = "<div id='tooltip'><img src='"+ src +"' style='max-width:700px; max-height:500px;'/><\/div>"; //创建 div 元素
                $("body").append(tooltip);
                $("#tooltip")
                    .css({
                        "top": (e.pageX+10) + "px",
                        "left": (e.pageY+10) + "px"
                    }).show("fast");      //设置x坐标和y坐标，并且显示
            }).mouseout(function(){ 
                $("#tooltip").remove();  //移除 
            }).mousemove(function(e){
                $("#tooltip")
                    .css({
                        "top": (e.pageY+10) + "px",
                        "left": (e.pageX+10) + "px"
                    });
            });
        })