一串跟着鼠标的div

一串跟着鼠标的div:
                            window.onload=function(){
                                            var oBox=document.getElementById("box");
                                            var aDiv=oBox.getElementsByTagName(‘div‘);
                                            for(var i=0;i<20;i++){    //创建20个div;
                                                    oBox.innerHTML+=‘<div></div>‘;
                                            }
                                            document.onmousemove=function(ev){
                                                    var e=ev||event;
                                                    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=e.clientX-aDiv[0].offsetWidth/2+‘px‘;//第一个div跟着鼠标移动;
                                                    aDiv[0].style.top=e.clientY-aDiv[0].offsetHeight/2+‘px‘;
                                            }
                                        }

时间： 2024-10-07 01:37:18

一串跟着鼠标的div的相关文章

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

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

一连串跟着鼠标的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||do

跟随鼠标的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

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背景闪烁动画效果丨

一连串跟随鼠标的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:

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