江小胖哈哈 2019-08-02 10:54 采纳率: 0%
浏览 316

图片跟随鼠标移动的一个疑问点

为图片设置了一个父级div,设置的是相对父级div的鼠标移动事件。但是当鼠标移出此div后图片还是可以跟随鼠标移动。而且当鼠标移动速度过快离开了图片,图片就不会再移动了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img{
            position:absolute;
            width: 50px;
            height: 50px;
        }
        div{
            background-color:red;
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
<div id="dv">
    <img src="1.jpg" alt="" id="im">
</div>


    <script>
        my$("dv").onmousemove=function(e){
            document.getElementById("im").style.left=e.clientX-20+"px";
            document.getElementById("im").style.top=e.clientY-20+"px";
            console.log(e.clientX+"hhh"+e.clientY);
        }


        function my$(element){
            return document.getElementById(element);
        }
    </script>
</body>
</html>

代码如上,求大神解惑。。。

  • 写回答

1条回答 默认 最新

  • Penba Tashi 2019-08-02 15:18
    关注

    兄弟,你如果希望鼠标移出div时img卡在div边缘的话,要加一层判断,每次移动前先判断img的left和top值是否越过了边界,如果越过了就直接赋值边缘的top和left值,如果没越过就正常移动。还有就是鼠标移出div时要取消绑定事件,鼠标进入div是重新设定img的位置。需要具体代码可以联系~

    评论

报告相同问题?

悬赏问题

  • ¥50 导入文件到网吧的电脑并且在重启之后不会被恢复
  • ¥15 (希望可以解决问题)ma和mb文件无法正常打开,打开后是空白,但是有正常内存占用,但可以在打开Maya应用程序后打开场景ma和mb格式。
  • ¥20 ML307A在使用AT命令连接EMQX平台的MQTT时被拒绝
  • ¥20 腾讯企业邮箱邮件可以恢复么
  • ¥15 有人知道怎么将自己的迁移策略布到edgecloudsim上使用吗?
  • ¥15 错误 LNK2001 无法解析的外部符号
  • ¥50 安装pyaudiokits失败
  • ¥15 计组这些题应该咋做呀
  • ¥60 更换迈创SOL6M4AE卡的时候,驱动要重新装才能使用,怎么解决?
  • ¥15 让node服务器有自动加载文件的功能