随鼠标移动的图标

<!DOCTYPE html>
<html lang="en">
    <head>
<meta charset="utf-8">
        <style type="text/css">
            img{
                position: absolute;
                top: 0;
                left: 0;
            }
        </style>
    </head>
    <body>
        <img src="imgs/snow.gif" id="snow">
        <script type="text/javascript">
            var img = document.getElementById('snow');
            //1.无脑写缓动动画公式
            var leaderX = 0, leaderY = 0;
            var targetX = 0, targetY = 0;
            setInterval(function(){
                leaderX = leaderX + (targetX - leaderX) / 10;
                leaderY = leaderY + (targetY - leaderY) / 10;
                img.style.left = leaderX + 'px';
                img.style.top = leaderY + 'px';
            }, 10);
            //2.给document注册onclick
            document.onclick = function(event){
                // alert('11');
                var evt = event || window.event;
                targetX = evt.clientX - img.offsetWidth / 2;
                targetY = evt.clientY - img.offsetHeight / 2;
            }
        </script>
    </body>
</html>

猜你喜欢

转载自www.cnblogs.com/mmit/p/11257759.html