一连串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 ...
随机推荐
- Vue3父组件调用子组件内部的方法
1. 子组件中定义方法并通过defineExpose暴露出去 import { reactive, defineExpose } from "vue"; const state = ...
- Unit Test下使用H2内存数据库
1.Maven引入包 <dependency> <groupId>com.h2database</groupId> <artifactId>h2< ...
- 虚拟机安装windows 7 32位 + sqlserver 2000
安装包网盘地址:(https://pan.baidu.com/s/1ZoC-cTafBi8zZbCkvvmvNA?pwd=x1y2 提取码:x1y2 ) VMware 安装win7 32 位 http ...
- 2月27日Android开发学习
App工程目录结构 App工程分为两个层次,第一个层次是项目,另一个层次是模块. 模块依附于项目,每个项目至少有一个模块.一般而言的"编译运行App",指的是运行某一模块,而非运行 ...
- React中的固定组件（随遇随记）
<React.StrictMode></React.StrictMode>对组件中使用严格模式 <React.Fragment></React.Fragmen ...
- ST能维护的性质
总结: 其实ST表不仅能处理最大值/最小值,凡是符合结合律且可重复贡献的信息查询都可以使用ST表高效进行.什么叫可重复贡献呢?设有一个二元运算 ,满足 ,则是可重复贡献的.显然最大值.最小值.最大 ...
- axis2 WebService 请求参数xml格式
方法定义 public class GetBillInfoService { public String getBillList(String xmlData, String temp ){} 传入接 ...
- Crypto入门 (四）不仅仅是Morse(Morse+Bacon)
前言: 前面我们刚刚学过了解Morsecode,现在我们将继续学习 不仅仅是Morse: 题目:--/.-/-.--/..--.-/-..././..--.-/..../.-/...-/./..--. ...
- Ubuntu与centos之间的文件传输
Ubuntu与centos之间的文件传输 默认端口:22 传输前确认端口是否开启 1.在Ubuntu上安装scp命令 apt-get install openssh-server 2.将U ...
- Java新手问题 请问各路大佬这是什么问题导致的呢？