事件对象（event）之图片跟随鼠标移动

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height:5000px;
        }
        img{
            position: absolute;
            border:1px solid #ccc;
            padding:10px 0;
            cursor: pointer;
        }
    </style>
</head>
<body>
       <img src="imags/img.jpg" width="100" alt=""  >
    <script>
        var img=document.getElementsByTagName("img")[0];
        var timer=null;
        var targetx=0;
        var targety=0;
        var leaderx=0;
        var leadery=0;
        document.onclick=function (event) {
            event=event||window.event;

            var pagey=event.pageY||scroll().top+event.clientY;
            var pagex=event.pageX||scroll().left+event.clientX;
            targety=pagey-30;
            targetx=pagex-50;

            clearInterval(timer);

            timer=setInterval(function () {
                leaderx=img.offsetLeft;
                var stepx=(targetx-leaderx)/10;
                stepx=stepx>0?Math.ceil(stepx):Math.floor(stepx);
                leaderx=leaderx+stepx;
                img.style.left=leaderx+"px";

                leadery=img.offsetTop;
                var stepy=(targety-leadery)/10;
                stepy=stepy>0?Math.ceil(stepy):Math.floor(stepy);
                leadery=leadery+stepy;
                img.style.top=leadery+"px";

             /*   if(Math.abs(targety-img.offsetTop)<=Math.abs(stepy) && Math.abs(targetx-img.offsetLeft)<=Math.abs(stepx)){
                    img.style.top = targety + "px";
                     img.style.left = targetx + "px";
                    clearInterval(timer);
                }*/
            },30);
        }
    </script>
</body>
</html>

案例：鼠标在盒子中的坐标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            height:200px;
            width:300px;
            margin: 100px;
            padding-top:100px;
            text-align: center;
            font:18px/30px "微软雅黑";
            background-color: pink;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="box">

</div>
<script>
    var div=document.getElementsByTagName("div")[0];
    div.onmousemove=function (event) {
        event=event||window.event;
        //获取鼠标在整个页面的位置
        var pagex=event.pageX||scroll().left+event.clientX;
        var pagey=event.pageY||scroll().top+event.clientY;
        //获取盒子在整个也免得位置
        var xx=div.offsetLeft;
        var yy=div.offsetTop;
        var targetx=pagex-xx;
        var targety=pagey-yy;
        this.innerHTML = "鼠标在盒子中的X坐标为："+targetx+"px;<br>鼠标在盒子中的Y坐标为："+targety+"px;"
    }
</script>
</body>
</html>

事件对象（event）之图片跟随鼠标移动

猜你喜欢