一连串跟着鼠标的DIV

<style>
div{width:50px;height:50px;background:#00CCFF;position:absolute;}
</style>

<script>

/*
这个原理其实很简单:后面的div都跟着第一个div走。
这个可以加window.onload=function(){}加载事件。
*/
function getpos(ev)
{
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop};
}
window.onload=function()
{
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></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

</body>

时间: 2024-09-30 06:58:20

一连串跟着鼠标的DIV的相关文章

跟随鼠标的DIV和一连串跟随鼠标的DIV

1. 跟随鼠标的DIV 1 window.onmousemove = function(ev) { 2 //浏览器兼容 3 var oEvent = ev || event; 4 var oDiv = document.getElementById("div1"); 5 6 //页面滚动的距离 7 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 8 var scrollLeft

一串跟着鼠标的div

一串跟着鼠标的div:                            window.onload=function(){                                            var oBox=document.getElementById("box");                                            var aDiv=oBox.getElementsByTagName('div');          

一连串跟随鼠标的DIV

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> body{ background:gray; } div{ width:50px; height:50px; position:absolute; left:300px; top:300px; border-radius:50%; background:

JS仿贪吃蛇:一串跟着鼠标的Div

贪吃蛇是一款80后.90后比较熟悉的经典游戏,下面通过简单的JS代码来实现低仿版贪吃蛇效果:随着鼠标的移动,在页面中呈现所有Div块跟随鼠标依次移动,效果如下图所示. <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>习题-仿select下拉框</title> <style> div {

CSS3感应鼠标的div背景闪烁动画效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS3感应鼠标的div背景闪烁动画效果丨

delphi7 怎么让button按钮跟着鼠标点击dbgrideh数据行移动

delphi7 怎么让button按钮跟着鼠标点击dbgrideh数据行移动 在 dbgrid的DBGridCellClick 事件中加上: Delphi/Pascal code 1 2 3 4 5 6 7 8 9 10 11 var   x, y : integer ;   P: TPoint; begin   GetCursorPos(P);   Edit1.Text := Format('X: %d, Y: %d',[P.X, P.Y]);   x := frMainTest.Left ;

我是如何抛弃鼠标的

鼠标老是坏,不想老是买.我已经一年没有使用鼠标了. 没有鼠标的话触摸板倒了霉,现在已经被摸得溜溜光.但是我不是全部使用触摸板哦---我还是大量的使用快捷键的. 1. 操作系统快捷键    我使用的操作系统是ubuntu 12.04LTS , 和win7一样,该有的快捷键都已经有了,比如全屏,半屏,最小化,显示桌面,工作空间切换等等---- ubuntu 用的是unity桌面, 漂亮的一逼,而且把应用程序放在启动器上之后也可以用快捷键打开了,抛弃鼠标已完成第一步--- 2. 文本编辑器 啊,那要是

鼠标的change事件

原本想着在<input>输入输入框中添加change事件,来实现对输入内容的限定. 当人们在使用时跟多的会直接去点击完成.所以完成按钮的点击事件会和change事件产生 冲突,所以我把验证放在了完成按钮中.这样会出现一个问题, input输入框的原值我无法拿到,在用户输入负值,和0之后我这边能做的只能是提醒, 不能把原值返回.但是用户应该是知道自己想要多少的,所以我暂时没有管他..

第十一节 JS事件基础

空白点击事件(没什么用处,做个介绍) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>点击</title> <style> body{ border: 1px solid black; } </style> <script> window.onload = functi