一连串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 ...
随机推荐
- SQL Sever ——基础篇之数据库的基本操作
数据库定义:对数据进行存储喝管理 数据库的系统模型:层次型,网状型,关系型(主流)和对象关系型. 关系型:Realation model 关系-->行列交叉.形式:表示实体和实体间相互联系的数据 ...
- java pta第二次阶段性总结
一.前言 经过这三次的pta训练,我对java再一次有了一个新的认识,这三次比起之前难度更大,所涉及的知识点更多.第4.5次作业是在前几次作业上的再次拓展,由三角形拓展到四边形,再由四边形拓展到五边形 ...
- Spring5框架
Spring5框架 一.Spring框架概述 1.1 Spring框架简介 Spring是一个开源框架,它由Rod Johnson创建.它是为了解决企业应用开发的复杂性而创建的.Spring使用基本的 ...
- java计时器Timer
基于java的计时器,定时发送消息 package timer; import java.lang.reflect.Array; import java.text.ParseException; im ...
- Spring Boot基础依赖
<properties> <java.version>1.8</java.version></properties><parent> < ...
- crontab命令加载和使用
crontab命令用于设置周期性被执行的指令. 在Linux系统中,Linux任务调度的工作主要分为以下两类:1.系统执行的工作:系统周期性所要执行的工作,如备份系统数据.清理缓存2.个人执行的工作: ...
- springmvc接口访问流程排查
首先找到webapp下面的web.xml文件: 检查前端控制器: 并注意contextConfigLocation配置的springmvc的配置文件路径: 接着找到springmvc配置文件路径,如果 ...
- axis2 WebService 请求参数xml格式
方法定义 public class GetBillInfoService { public String getBillList(String xmlData, String temp ){} 传入接 ...
- opengl编程天天踩的坑
1. VBO 的 target 是 GL_ARRAY_BUFFER 不是 GL_VERTEX_BUFFER 2. glUniform()用来给uniform传变量 别用成 glProgramUnif ...
- []Python][simple]Serialize data with Pickle and deserialize data from pickle
序列化 import pickle friend = {"Dan": [20, "Lodon", 123123], "Mary" : [24 ...