div随着鼠标移动而移动

末蓝、 2022-06-02 00:45 186阅读 0赞

**我做的是类似一个鼠标移入展示图标，移出消失如下展示：**

**![Center][](很丑，时间关系就简单做了一个，但是功能健全，可以随意扩展和修改)**

**1.页面上元素**

//这个div是用来渲染图片的，所以初始是隐藏的而且是悬浮在页面上面的不影响其他展示

<div id="img_div" style="display: none;align-self: center;z-index: 5;position:fixed" ></div>
    //这个div是页面上获取数据的（我的数据后台传递过来的）
    
    <div class="img_div" >
    
    <input class="img_in" value="${row.logoUrl}"/>
    
    </div>

`2.js代码部分（页面加载完毕）`

//获取隐藏的div dom对象
    var o = document.getElementById("img_div");
    
    //为页面上input所在div 绑定鼠标的移入移出事件
    //并且调用动态获取鼠标坐标的方法
    //function(event)方法的event参数是为了兼容火狐浏览器的
    $(document).on("mouseover",".img_url",function(event){
        var e = event || window.event;
        //获取鼠标的y轴坐标因为页面是滚动的加上滚动值 所以渲染的div 设置position:fixed相对的
        var yy = e.clientY + document.body.scrollTop;
        var xx = e.clientX;
        $('#img_div').css({top: yy+20, left:xx});
    	
        //获取input的值 并给页面渲染一个img标签解析图片
        var imgU = $(this).children().val();
        $("#img_div").html("<div style='text-align: center;'><img src='"+imgU+"' width='100%' height='85%'/>"+imgU+"</div>");
        o.style.display="block";
    });
    
    //鼠标移出
    $(document).on("mouseout",".img_url",function(){
        var imgU = $(this).text();
        o.style.display="none";
    });

**如有披露或问题欢迎留言或者入群探讨**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDcwNzMz_size_16_color_FFFFFF_t_70][]

[Center]: /images/20220602/d531b43ce87d4defb4f66150a2c09750.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDcwNzMz_size_16_color_FFFFFF_t_70]: /images/20220602/36aaf31b09b048cd827e84887fbf963c.png