一串跟随鼠标的DIV

最新推荐文章于 2021-06-05 04:25:31 发布

bangxionger9224

最新推荐文章于 2021-06-05 04:25:31 发布

阅读量124

点赞数

原文链接：http://www.cnblogs.com/theWayToAce/p/5304691.html

版权

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>