一串跟随鼠标的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跟着鼠标）：
aaarticlea/png;base64,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" alt="" /> 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>
运行结果：
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAb8AAACXCAIAAAAK+cLKAAAD1klEQVR4nO3UQU0FUBRDwS8O4TgDBzfwNk3TmVRAV+fzA8D/fdIHACqpJ8AL9QR4oZ4AL9ST09e3/XWMUU9O8SQVjTHqySmepKIxRj05xZNUNMaoJ6d4korGGPXkFE9S0RijnpziSSoaY9STUzxJRWOMenKKJ6lojFFPTvEkFY0x6skpnqSiMUY9OcWTVDTGqCeneJKKxhj15BRPUtEYo56c4kkqGmPUk1M8SUVjjHpyiiepaIxRT07xJBWNMerJKZ6kojFGPTnFk1Q0xqgnp3iSisYY9eQUT1LRGKOenOJJKhpj1JNTPElFY4x6coonqWiMUU9O8SQVjTHqySmepKIxRj05xZNUNMaoJ6d4korGGPXkFE9S0RijnpziSSoaY9STUzxJRWOMenKKJ6lojFFPTvEkFY0x6skpnqSiMUY9OcWTVDTGqCeneJKKxhj15BRPUtEYo56c4kkqGmPUk1M8SUVjjHpyiiepaIxRT07xJBWNMerJKZ6kojFGPTnFk1Q0xqgnp3iSisYY9eQUT1LRGKOenOJJKhpj1JNTPElFY4x6coonqWiMUU9O8SQVjTHqySmepKIxRj05xZNUNMaoJ6d4korGGPXkFE9S0RijnpziSSoaY9STUzxJRWOMenKKJ6lojFFPTvEkFY0x6skpnqSiMUY9OcWTVDTGqCeneJKKxhj15BRPUtEYo56c4kkqGmPUk1M8SUVjjHpyiiepaIxRT07xJBWNMerJKZ6kojFGPTnFk1Q0xqgnp3iSisYY9eQUT1LRGKOenOJJKhpj1JNTPElFY4x6coonqWiMUU9O8SQVjTHqySmepKIxRj05xZNUNMaoJ6d4korGGPXkFE9S0RijnpziSSoaY9STUzxJRWOMenKKJ6lojFFPTvEkFY0x6skpnqSiMUY9OcWTVDTGqCeneJKKxhj15BRPUtEYo56c4kkqGmPUk1M8SUVjjHpyiiepaIxRT07xJBWNMerJKZ6kojFGPTnFk1Q0xqgnp3iSisYY9eQUT1LRGKOenOJJKhpj1JNTPElFY4x6coonqWiMUU9O8SQVjTHqySmepKIxRj05xZNUNMaoJ8AL9QR4oZ4AL9QT4IV6ArxQT4AX6gnwQj0BXqgnwAv1BHihngAv1BPghXoCvFBPgBfqCfBCPQFeqCfAC/UEeKGeAC/UE+CFegK8UE+AF+oJ8EI9AV6oJ8AL9QR4oZ4AL9QT4IV6ArxQT4AX6gnwQj0BXqgnwAv1BHihngAv1BPghXoCvFBPgBfqCfBCPQFeqCfAC/UEeKGeAC/UE+CFegK8UE+AF7/bn+pJlw2HXQAAAABJRU5ErkJggg==" alt="" />
一串跟随鼠标的DIV的更多相关文章
- JS仿贪吃蛇：一串跟着鼠标的Div
贪吃蛇是一款80后.90后比较熟悉的经典游戏,下面通过简单的JS代码来实现低仿版贪吃蛇效果:随着鼠标的移动,在页面中呈现所有Div块跟随鼠标依次移动,效果如下图所示. <!DOCTYPE htm ...
- 在jsp里面 当鼠标元素触发onmouseover时，旁边出现一个浮动且跟随鼠标的div ，移开消失
JSP页面 : <label onmouseover="showLongStrlog(window.event, '<list:seqnum></list:seqnu ...
- JS学习笔记 - 封装getPosition函数、一串跟着鼠标的div
function getPosition(ev) { var scrollTop = document.documentElement.scrollTop || document.body.scrol ...
- 鼠标悬浮控制元素隐藏与显示 - css中鼠标的hover状态
需求:当鼠标移动到一个元素A身上时,另外一个元素B显示. 实现原理: A元素与B元素有一个相同的父级. B元素默认隐藏,A元素默认显示. 当鼠标移动到A元素身上时,也可以看做是移动到了A元素的父级身上 ...
- div 块跟随 鼠标点击
js: $(document).ready(function () { $(".company-contact ul li").click(function (ev) { ...
- Jquery几行代码解决跟随屏幕滚动DIV
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 【收藏】JS获取鼠标的X,Y坐标位置
JS的方法: <html> <head> <meta http-equiv="Content-Type" content="text/htm ...
- 鼠标的change事件
原本想着在<input>输入输入框中添加change事件,来实现对输入内容的限定. 当人们在使用时跟多的会直接去点击完成.所以完成按钮的点击事件会和change事件产生 冲突,所以我把验证 ...
- linux中如何使用微软鼠标的第4、5键
虽说使用linux的 人大都对微软没什么好感,但不能否认微软确实也出了不少好东西呀,比如微软鼠标(IE系列) icon_smile.gif IE 2.0和以上版本都有5个按钮,除了正常的左中右外,两侧 ...
随机推荐
- CUBLAS基础实验
一.概述 最近在试图进行cuda并行编程,目标是编写一段矩阵计算代码,将计算结果存储进入GPU的缓冲区当中,并在达到某些要求后强制刷新缓冲区,取得计算结果. 但是考虑时间紧任务重的状况和实际的性能要求 ...
- struts2学习笔记一
一.框架概述 1.框架的意义与作用: 所谓框架,就是把一些繁琐的重复性代码封装起来,使程序员在编码中把更多的经历放到业务需求的分析和理解上面. 特点:封装了很多细节,程序员在使用的时候会非常简单. 2 ...
- 搭建cvs服务器
http://zhangjunhd.blog.51cto.com/113473/78595 http://www.cnblogs.com/lee/archive/2008/10/22/1317226. ...
- java实现单个或多个文件的压缩、解压缩 支持zip、rar等格式
代码如下: package com.cn.util; import java.io.BufferedInputStream; import java.io.File; import java.io.F ...
- 阴影效果的小 demo
早上没事干,感觉字体阴影的效果还是好看的,那么就来一个小demo吧! 1.这是html 简单的有一个标签或者盒子都可以 <div class="demo11">我爱考试 ...
- 关于相对布局RelativeLayout的各种属性介绍
RelativeLayout相对布局是个人觉得在android布局中比较常用且好用的一个,当然如果想让布局更漂亮是需要多种布局混合搭建的,这里就需要更深入的学习了,在这只介绍下有关相对布局的东西. 相 ...
- 适用于Linux的windows子系统
Windows基于图形界面的易用性是有目共睹的,这也是很多普通用户往往难以舍弃的原因.但是Linux系统更强大的网络应用开发能力,却又是Windows系统所无法比拟的.一直以来,很多人都在试图采用各种 ...
- Python全栈 MongoDB 数据库（概念、安装、创建数据）
什么是关系型数据库? 是建立在关系数据库模型基础上的数据库,借助于集合代数等概念和方法来处理数据库中的数据, 同时也是一个被组织成一组拥有正式描述性的表格( ...
- JVM 什么时候会触发FGC
1:System.gc(); 2:老年代满了 没啥好说的从年轻代去往老年代的 3:JDK7或JDK6中永久区满了 得看是否还会有分配,如果没有就不会进行FGC,不过CMS GC下会看到不停地CMS G ...
- Laxcus大数据管理系统2.0（3）- 第一章 基础概述 1.2 产品特点
1.2 产品特点 Laxcus大数据管理系统运行在计算机集群上,特别强调软件对分布资源可随机增减的适应性.这种运行过程中数据动态波动和需要瞬时感知的特点,完全不同与传统的集中处理模式.这个特性衍生出一 ...