一连串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 ...
随机推荐
- UEC++学习(2)
第三章 断言 第一节 简单的断言 断言让程序的进程中断,方便程序员发现在哪里发生了问题. AGameBase * GameBase = nullptr; check(false); check(Gam ...
- Linux基础知识2
目录和文件管理 linux以目录形式挂载(通过目录访问存储设备)文件系统,目录结构分层的树形结构. 链接:在共享文件和访问它的用户的若干目录项之间建立联系的方法,包括硬链接和软链接两种方式 linux ...
- PageHeplper使用
1.引入POM 1 <dependency> 2 <groupId>com.github.pagehelper</groupId> 3 <artifactId ...
- idea创建maven + tomcat项目
移动文件夹: 找到tomcat文件目录 配置完成,添加测试html文件: 运行 修改默认路径:
- 华为服务器修改ibmc账号密码、配置raid5、安装系统
修改ibmc账号密码 转载自:https://www.cnblogs.com/mtactor/p/2288V5.html 昵称: mtactor 方法一:采用网线直连管理口 1.使用网线直接连接服务 ...
- logic 运算符
- <a-upLoad>连报三错
[Vue warn]: Invalid prop: custom validator check failed for prop "fileList". [Vue warn]: I ...
- 子接口vlan终结
问题: 在华为的NE40E设备上,配置三层字接口的ip后,接口的physical状态为up, protocol为down,接口还是不可用. 解决方案: 需要在子接口上配置vlan终结,配置如下: 为什 ...
- Django数据迁移介绍
1.简介 迁移是 Django 将你对模型的修改(例如增加一个字段,删除一个模型)应用至数据库表结构对方式 2.基本命令 python manage.py migrate---负责应用和撤销迁移 py ...
- 我亲自整理的Tampermonkey(以下简称tm)v4.13.6136的编辑器按键映射(基于联想笔记本键盘+win10+火狐浏览器企业版)
警告:你可以对该随笔内容进行转载,但必须写明其来源网址,以及其作者是博客园的zqdlly,否则后果自负!不要小看了我,我一定会让你付出你应得的成本. 0. 家喻户晓的 键 原生comment myMe ...