一串跟随鼠标的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,iVBORw0KGgoAAAANSUhEUgAAAvYAAAFPCAIAAACprh1XAAAMj0lEQVR4nO3WQY7rSAxEwb7/pWdWWhhCA21/ykmyIqADSFUC+X7+AwBY5yf9AgAA9SQOALCQxAEAFpI4AMBCEgcAWEjiAAALSRwAYCGJAwAsJHEAgIUkDgCwkMQBABaSOADAQhIHAFhI4gAAC0kcAGAhiQMALCRxAICFJA4AsJDEAQAWkjgAwEISBwBYSOIAAAtJHABgIYkDACwkcQCAhSQOALCQxAEAFpI4AMBCEgcAWGha4vz8dHwAgGamred4zUgcAJhg2nqO14zEAYAJpq3neM1IHACYYNp6jteMxAGACaat53jNSBwAmGDaeo7XjMQBgAmmred4zUgcAJhg2nqO14zEAYAJpq3neM1IHACYYNp6jteMxAGACaat53jNSBwAmGDaeo7XjMQBgAmmred4zUgcAJhg2nqO14zEAYAJpq3neM00fACAm2kLMt4TDR8A4Gbagoz3RMMHALiZtiDjPdHwAQBupi3IeE80fACAm2kLMt4TDR8A4Gbagoz3RMMHALiZtiDjPdHwAQBupi3IeE80fACAm2kLMt4TDR8A4Gbagoz3RMMHALiZtiDjPdHwAQBupi3IeE80fACAm2kLMt4TDR8A4Gbagoz3RMMHALiZtiDjPdHwAQBupi3IeE80fACAm2kLMt4TDR8A4Gbagoz3RMMHALiZtiDjPdHwAQBupi3IeE80fNoeCwDkTNtD8bXd8Gl7LACQM20Pxdd2w6ftsQBAzrQ9FF/bDZ+2xwIAOdP2UHxtN3zaHgsA5EzbQ/G13fBpeywAkDNtD8XXdsOn7bEAQM60PRRf2w2ftscCADnT9lB8bTd82h4LAORM20Pxtd3waXssAJAzbQ/F13bDp+2xAEDOtD0UX9sNn7bHAgA50/ZQfG03fNoeCwDkTNtD8bXd8Gl7LACQM20Pxdd2w6ftsQBAjj30jng0SBwA+Bt76B3xaJA4APA39tA74tEgcQDgb+yhd8SjQeIAwN/YQ++IR4PEAYC/sYfeEY8GiQMAf2MPvSMeDRIHAP7GHnpHPBr2JU78JT9+cwB6M83fEV+9v+3j+Dt8HArxl/z4zQHozTR/R3z1/raP4+/wcSjEX/LjNwegN9P8HfHV+9s+jr/Dx6EQf8mP3xyA3kzzd8RX72/7OP4OH4dC/CU/fnMAejPN3xFfvb/t4/g7fBwK8Zf8+M0B6M00f0d89f62j+Pv8HEoxF/y4zcHoDfT/B3x1fvbPo6/w8ehEH/Jj98cgN5M8xXiTSBxAGjGNF8h3gQSB4BmTPMV4k0gcQBoxjRfId4EEgeAZkzzFeJNIHEAaMY0XyHeBBIHgGZM8xXiTSBxAGjGNF8h3gQSB4BmTPMV4k0gcQBoxjRfId4EEgeAZkzzFeJNIHEAaMY0XyHeBBIHgGZM8xXiTSBxAGjGNF8h3gQSB4BmTPMV4k0gcQBoxjRfId4EEgeAZkzzFeJNIHEAaMY0XyHeBBIHgGZM8xXiTSBxVn4OwGTG3wrxJfrxZo2/ZG0TxN+89nMAJjP+iIqvf4kDsJTxR1R8/UscgKWMP6Li61/iACxl/BEVX/8SB2Ap44+o+PqXOABLGX9Exde/xAFYyvgjKr7+JQ7AUsYfUfH1L3EAljL+iIqvf4kDsJTxR1R8/UscgKWMP6Li61/iACxl/BEVX/8SB2Ap44+o+PqXOABLGX9Exde/xAFYyvgjKr7+JQ7AUsYfUfH1L3EAljL+iIqvf4kDsJTxR1R8/UscgKWMP6Li61/iACxl/BEVX/8SB2Ap44+o+PqXOABLGX9Exde/xAFYyviDOvGakTgAF+MP6sRrRuIAXIw/qBOvGYkDcDH+oE68ZiQOwMX4gzrxmpE4ABfjD+rEa0biAFyMP6gTrxmJA3Ax/qBOvGaCiRP/THkHvDICoE58o0sciQNcjACoE9/oEkfiABcjAOrEN7rEkTjAxQiAOvGNLnEkDnAxAqBOfKNLHIkDXIwAqBPf6BJH4gAXIwDqxDe6xJE4wMUIgDrxjS5xJA5wMQKgTnyjSxyJA1yMAKgT3+gSR+IAFyMA6sQ3usSROMDFCIA68Y0ucSQOcDECoE58o0sciQNcjACoE9/oEkfiABcjAOrEN7rEkTjAxQiAOvGNLnEkDnAxAqBOfKNLHIkDXIwAqBPf6BJH4gAXIwCoEK8ZiQO8MgKACvGakTjAKyMAqBCvGYkDvDICgArxmpE4wCsjAKgQrxmJA7wyAoAK8ZqROMArIwCoEK8ZiQO8MgKACvGakTjAKyMAqBCvGYkDvDICgArxmpE4wCsjAKgQrxmJA7wyAoAK8ZqROMArIwCoEK8ZiQO8MgKACvGaaZg48c9veCbwRX53oEJ8czdc5/HPb3gm8EV+d6BCfHM3XOfxz294JvBFfnegQnxzN1zn8c9veCbwRX53oEJ8czdc5/HPb3gm8EV+d6BCfHM3XOfxz294JvBFfnegQnxzN1zn8c9veCbwRX53oEJ8czdc5/HPb3gm8EV+d6BCfHM3XOfxz294JvBFfnegQnxzN1zn8c9veCbwRX53oEJ8czdc5/HPb3gm8EV+d6BCfHM3XOfxz294JvBFfnegQnxzN1zn8c9veCbwRX53oEJ8czdc5/HPb3gm8EV+d6BCfHM3XOfxz294JvBFfnegQnxzN1zn8c9veCbwRX53oEJ8czdc5/HPb3gm8EV+d6BCfHM3XOfxz294JvBFfneAZ8RrRuJwNr87wDPiNSNxOJvfHeAZ8ZqROJzN7w7wjHjNSBzO5ncHeEa8ZiQOZ/O7AzwjXjMSh7P53QGeEa8ZicPZ/O4Az4jXjMThbH53gGfEa0bicDa/O8Az4jUjcTib3x3gGfGakTicze8O8Ix4zUgczuZ3B3hGvGYkDmfzuwM8I14zEoez+d0BnhGvGYnD2fzuAM+I14zE4Wx+d4BnxGtG4nA2vzvAM+I1I3E4m98d4BnxmpE4nM3vDvCMeM1IHM7mdwd4RrxmJA5n87sDPCNeMxKHs/ndAZ4RrxmJw9n87gDPiNeMxOFsfneAZ8RrRuJwNr87wDPiNbMpceLntukwj+GGAJ4RX8CbtnL83DYd5jHcEMAz4gt401aOn9umwzyGGwJ4RnwBb9rK8XPbdJjHcEMAz4gv4E1bOX5umw7zGG4I4BnxBbxpK8fPbdNhHsMNATwjvoA3beX4uW06zGO4IQDai9eMxBnIDQHQXrxmJM5AbgiA9uI1I3EGckMAtBevGYkzkBsCoL14zUicgdwQAO3Fa0biDOSGAGgvXjMSZyA3BEB78ZqROAO5IQDai9eMxBnIDQHQXrxmJM5AbgiA9uI1I3EGckMAtBevGYkzkBsCoL14zUicgdwQAO3Fa0biDOSGAGgvXjMSZyA3BEB78ZqROAO5IQDai9eMxBnIDQHQXrxmJM5AbgiA9uI1I3EGckMAtBevGYkzkBsCoL14zUicgdwQAO3Fa0biDOSGAGgvXjMSZyA3BEB78ZqROAO5IQDai9eMxBnIDQHQXrxmJM5AbgiA9uI1I3EGckMAtBevGYkzkBsCoL14zUicgdwQAO3Fa0biDOSGAGgvXjMSZyA3BEB78ZpZkDjx4/r6GU67IQAOFN/EEmfgGU67IQAOFN/EEmfgGU67IQAOFN/EEmfgGU67IQAOFN/EEmfgGU67IQAOFN/EEmfgGU67IQAOFN/EEmfgGU67IQAOFN/EEmfgGU67IQAOFN/EEmfgGU67IQAOFN/EEmfgGU67IQAOFN/EEmfgGU67IQAOFN/EEmfgGU67IQDgA/GakTgAQL14zUgcAKBevGYkDgBQL14zEgcAqBevGYkDANSL14zEAQDqxWtG4gAA9eI1I3EAgHrxmpE4AEC9eM1IHACgXrxmJA4AUC9eMxIHAKgXrxmJAwDUi9eMxAEA6sVrRuIAAPXiNSNxAIB68ZqROABAvXjNSBwAoF68ZiQOAFAvXjMSBwCoF68ZiQMA1IvXjMQBAOrFa0biAAD14jUjcQCAevGakTgAQL14zUgcAKBevGYkDgBQL14zEgcAqBevGYkDANSL14zEAQDqxWtG4gAA9eI1I3EAgHrxmpE4AEC9eM1IHACgXrxmJA4AUC9eMxIHAKgXrxmJAwDUi9eMxAEA+HcSBwBYSOIAAAtJHABgIYkDACwkcQCAhSQOALCQxAEAFpI4AMBCEgcAWEjiAAALSRwAYCGJAwAsJHEAgIUkDgCwkMQBABaSOADAQhIHAFhI4gAAC0kcAGAhiQMALCRxAICFJA4AsJDEAQAWkjgAwEISBwBYSOIAAAtJHABgof8Bmx7XZJxlKPUAAAAASUVORK5CYII=" 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个按钮,除了正常的左中右外,两侧 ...
随机推荐
- Git的升级版本
关于升级版本,例如我们要升级service版本,我们可以这样子操作 1.在master里面pull完了之后,到自己的分支,然后merge master里面的代码,然后把pom文件 里面的版本升一级,然 ...
- 2，PyAudio 实现录音 自动化交互实现问答
Python 很强大其原因就是因为它庞大的三方库 , 资源是非常的丰富 , 当然也不会缺少关于音频的库 关于音频, PyAudio 这个库, 可以实现开启麦克风录音, 可以播放音频文件等等,此刻我们不 ...
- ajax同步和异步的切换
ajax为网页提供了非常不错的异步机制,但是有时候两个ajax放在一起,希望第一个完成后再继续第二个ajax的执行.这时候可以将第一个ajax代码带上同步参数即可,如下: $.ajax({ async ...
- 扩展报表-JavaSet
前言 使用商业分析中的扩展报表平台,可以很方便的进行数据分析,进行图表化直观展示.一般情况下使用SQL数据集进行SQL的编写,进而配合扩展报表平台进行数据分析图表的绘制,但SQL数据集针对固定的参数进 ...
- LeetCode：22. Generate Parentheses（Medium）
1. 原题链接 https://leetcode.com/problems/generate-parentheses/description/ 2. 题目要求 给出一个正整数n,请求出由n对合法的圆括 ...
- spring读取properties和其他配置文件的几种方式
1.因为spring容器的一些机制,在读取配置文件进行数据库的配置等等是很有必要的,所以我们要考虑配置文件的的读取方式以及各个方式的实用性 2.配置文件的读取方式我这里介绍2种,目的是掌握这2种就可以 ...
- Eclipse+APKTool动态调试APK
1. 所需工具 Eclipse. Apktool v2.0.6. 安卓SDK工具. 2. 重编译APK apktool d -d -o test test.apk 此时当前test目录下就是apkto ...
- Vue学习（五）：列表渲染
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Linux-Shell脚本编程-学习-5-Shell编程-使用结构化命令-if-then-else-elif
if-then语句 if-then语句格式如下 if comman then command fi bash shell中的if语句可鞥会和我们接触的其他if语句的工作方式不同,bash shell的 ...
- nmon Analyser分析仪
nmon Analyser官网: https://www.ibm.com/developerworks/community/wikis/home?lang=en#!/wiki/Power+System ...