一串跟随鼠标的DIV

div跟随鼠标移动的函数：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
        #div1 {
            width: 200px;
            height: 200px;
            background: red;
            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 oEvent = ev || event;
            var oDiv = document.getElementById('div1');
            var pos = getPos(oEvent);

            oDiv.style.left = pos.x + 'px';
            oDiv.style.top = pos.y + 'px';
        };
    </script>
</head>

<body style="height:2000px;">
<div id="div1"></div>
</body>
</html>


HTML：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
        div {
            width: 50px;
            height: 50px;
            background: red;
            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>
</head>

<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>


</body>
</html>

运行结果（每一个div都跟着前面一个div，第一个div跟着鼠标）：
　　　　


HTML（div跟随键盘移动）：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style type="text/css">
        #div {
            width: 100px;
            height: 100px;
            background: #ff44c0;
            position: absolute;
        }
    </style>
    <script>

        document.onkeydown = function keyDown(ev)//按下键盘事件
        {
            var oEvent = ev || event;
            var oDiv = document.getElementById("div");
            var speed = 20;
            if (oEvent.keyCode == 37) {//键盘左键
                oDiv.style.left = oDiv.offsetLeft - speed + "px";
            } else if (oEvent.keyCode == 38) {//键盘右键
                oDiv.style.top = oDiv.offsetTop - speed + "px";
            } else if (oEvent.keyCode == 39) {//键盘上键
                oDiv.style.left = oDiv.offsetLeft + speed + "px";
            } else if (oEvent.keyCode == 40) {//键盘下键
                oDiv.style.top = oDiv.offsetTop + speed + "px";
            }

        };


    </script>
</head>

<body>
<div id="div"></div>
</body>
</html>

运行结果：

posted on 2016-03-22 09:01 Newbie_小白阅读(422) 评论(0) 收藏举报