一连串div跟随鼠标移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一连串元素跟着鼠标移动</title>
<style>
*{
padding: 0;
margin: 0;
}
p{
display: block;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: red;
position: absolute;
left: 0;
top: 0;
}
</style>
<script src="../public.js"></script>
</head>
<body>
<div class="box">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</body>
<script>
var aP=document.querySelectorAll(".box p")
addEvent(document,"mousemove",move)
function move(eve) {
var e = eve || window.event
for (var i = aP.length - 1; i > 0; i--) {
for (var i = aP.length - 1; i > 0; i--) {
aP[i].style.left = aP[i - 1].offsetLeft + "px";
aP[i].style.top = aP[i - 1].offsetTop + "px";
}
// 最后操作第一个元素
aP[0].style.left = e.pageX + "px";
aP[0].style.top = e.pageY + "px";
}
}
</script>
</html>
一连串div跟随鼠标移动的更多相关文章
- div跟随鼠标移动
1.目标是实现div跟随鼠标而移动,分三种情况进行实现 a)首先获取div,进行绑定鼠标移动事件,给div开启定位功能 第一种实现方式,假如body的大小跟页面大小一样,则可以用这个方法. 1)获取鼠 ...
- 一组div跟随鼠标移动，反应鼠标轨迹
<!DOCTYPE html> <html> <head> <title>div随鼠标移动</title> <style type=& ...
- javascript 一串DIV跟随鼠标移动
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- javascript div跟随鼠标移动
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 鼠标拖动div，div跟随鼠标移动效果
<div id="boxDiv" style='width:20px;height:20px;position:absolute;background:red;'> ...
- js 实现div跟随鼠标移动
今天看到了一个自己可以随心所欲的拖到div到页面的任意位置.感觉挺好的,就心血来潮的查询了一下,看看网友做的 代码如下: <script>function doit(){ var obj ...
- jquery对div元素进行鼠标移动（稍稍修改下可以实现div跟随鼠标）
/* 网上找了资料都是对于event.clientX和offset().left进行了计算,但是去掉了这个计算方式,直接使用当前坐标也一样,效果都一样不太好 strHeader:标题 jquery定位 ...
- 【案例】DIV随鼠标移动而移动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 一款基于TweenMax跟随鼠标单击移动的div
今天给大家分享一款基于TweenMax跟随鼠标单击移动的div.在这款实例中你可以单击任意位置,div会移动到你单击的位置.效果图如下: 在线预览 源码下载 实现的代码. html代码: < ...
- html页面设置一个跟随鼠标移动的DIV（jQuery实现）
说明业务:鼠标放到某个标签上,显示一个div,并跟随鼠标移动 html页面(直接放body里面): <a href="#" id="'+data[i].refund ...
随机推荐
- AS3.0和php数据交互POST方式
AS3.0和php数据交互POST方式首先打开flash建立一个as3.0的文件拖 textarea和button组建到舞台上分别给两个组件命名:txtcontent和addcontent然后点第一帧 ...
- obspy常用命令记录
如何使用obspy(适用于MAC.Linux.Windows)完全替代SAC(使用于Linux和MAC) 波形预处理 # 去均值 stream.detrend('demean') # 去线性趋势 st ...
- wampserver APACHE配置文件 和 单独安装APACHE 的配置文件 的区别
wampserver APACHE配置文件: 单独安装APACHE 的配置文件
- homework2软件方法论
什么是软件工程方法论? 1.软件工程是一个方法论,就是我们在开始一个项目时,大体框架一定要有这么一个概念,而具体实施时,必须根据公司一些特点,优化项目开发的流程,这样才是有实效而方法论只是软件工程的结 ...
- mysql锁表原因及解决方法
mysql锁表原因及解决方法 一.导致锁表的原因 1.锁表发生在insert update .delete 中: 2.锁表的原理是 数据库使用独占式封锁机制,当执行上面的语句时,对表进行锁住,直到 ...
- .net core 接收并存储客户端上传的文件
1 文件是上传到Host,非上传到阿里云OSS 2 在Program.cs或StartUp中使用静态文件的中间件 public void Configure(IApplicationBuilder a ...
- 与用户交互 Scanner
与用户交互 Scanner Scanner对象 Java提供了一个工具类,可以用以获取用户的输入.java.util.Scanner 是Java5的新特征 基本语法 Scanner s = new S ...
- (五).JavaScript的数组
1. 数组 1.1 数组的基础 数组:同种或不同数据类型数据的有序集合 功能:同时存储多个数据 数据:常量 变量 表达式 数组 函数 对象 定义方式:字面量定义或者构造函数定义 字面量定义数组(本质上 ...
- JSqlParser解析SQL时SUM包裹IF出错
SQL SELECT SUM(IF(1=1,1,0)) AS `result` FROM sys_user 这种会报错的. 错误信息 Caused by: net.sf.jsqlparser.JSQL ...
- selenium---xpath定位方法详解
Xpath定位 验证xpath写的是否正确: 1.打开浏览器检查页面,Ctrl+F,把路径输入进去,如果可以定位到的位置只有一个,说明是对的 2.在需要定位的页面,按F12后,切换至console ...