前端开发简单的鼠标跟随事件

怎么面试前端开发
百度前端开发实习面试
前端开发面试应届生

html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>鼠标</title>
    </head>
    <style>
        .div1 {
            height: 20px;
            width: 20px;
            background: #be37b9;
            position: absolute;
        }
    </style>
    <script>
        function getPos(ev) {
            var scrollTop =
                document.documentElement.scrollTop || document.body.scrollTop
            var scrollLeft =
                document.documentElement.scrollLeft || document.body.scrollLeft
            return { x: ev.clientX + scrollLeft, y: ev.clientY + scrollTop }
        }
        document.onmousemove = function(ev) {
            var aDiv = document.getElementsByTagName(‘div’)
            var oEvent = ev || event
            var pos = getPos(oEvent)
            for (var i = aDiv.length – 1; i > 0; i–) {
                aDiv[i].style.left = aDiv[i – 1].offsetLeft + ‘px’
                aDiv[i].style.top = aDiv[i – 1].offsetTop + ‘px’
            }
            aDiv[0].style.left = pos.x + ‘px’
            aDiv[0].style.top = pos.y + ‘px’
        }
    </script>
    <body>
        <div class=”div1″></div>
        <div class=”div1″></div>
        <div class=”div1″></div>
        <div class=”div1″></div>
        <div class=”div1″></div>
        <div class=”div1″></div>
        <div class=”div1″></div>
        <div class=”div1″></div>
        <div class=”div1″></div>
        <div class=”div1″></div>
        <div class=”div1″></div>
        <div class=”div1″></div>
        <div class=”div1″></div>
        <div class=”div1″></div>
        <div class=”div1″></div>
        <div class=”div1″></div>
        <div class=”div1″></div>
        <div class=”div1″></div>
        <div class=”div1″></div>
        <div class=”div1″></div>
        <div class=”div1″></div>
        <div class=”div1″></div>
        <div class=”div1″></div>
        <div class=”div1″></div>
        <div class=”div1″></div>
        <div class=”div1″></div>
        <div class=”div1″></div>
        <div class=”div1″></div>
        <div class=”div1″></div>
    </body>
</html>
爱奇艺 web前端开发面试题
英语前端开发面试题
0基础面试web前端开发
» 本文来自:前端开发者 » 《前端开发简单的鼠标跟随事件》
» 本文链接地址:https://www.rokub.com/7969.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!