一连串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 ...
随机推荐
- 入库大文件csv文件
LOAD DATA LOCAL INFILE 'D:\\ss\\chongzhi\\T_RORD.csv' INTO TABLE cz_T_RECHARGE_SET_RECORDFIELDS TERM ...
- Ubuntu22.04 KubeSphere 安装K8S集群
Ubuntu22.04 KubeSphere 安装K8S集群_Ri0n的博客-CSDN博客 一.系统环境系统:Ubuntu 22.04集群IP分布hostname 角色 IP地址master mast ...
- echarts 画图报错 this.dom.getContext is not a function
我给 <el-card>绑定了ref,利用$refs获取 echarts实例 const echarts1 = echarts.init(this.$refs.echarts1); 结果 ...
- Java基础|03.基础语法(2)
Java安全|03.Java基础语法(2) 00x1 单例模式 定义: 单例模式(Singleton Pattern)是 Java 中最简单的设计模式之一.这种类型的设计模式属于创建型模式,它提供了一 ...
- 使用@Param注解时注意org.springframework.data.repository.query.Param与org.apache.ibatis.annotations.Param的区别
注解@Param有以下两种: 1.Spring org.springframework.data.repository.query.Param 2.mybatis org.apache.ibatis. ...
- nuxt.js的导航守卫
一.使用router.js 重构项目时还行使用原来的router.js也是可以的,需要下载插件惊醒配置,这时候vue-cli中怎么用,nuxt中就怎么使用导航守卫,几乎一样 二.使用nuxt.js 1 ...
- Android studio 使用dialog提示信息
package com.example.androidtest2; import androidx.appcompat.app.AlertDialog;import androidx.appcompa ...
- 基于mysql纯java的智能题库（后期填写注释）
1 package controller; 2 3 import admin.entity.Admin; 4 import admin.service.AdminService; 5 import a ...
- ant design upload组件的beforeUpload阻止默认上传行为
const onImportExcel = (file) => { return new Promise(async (resolve, reject) => { ... //要执行的语句 ...
- PHP实现微信提现V3版本2022-5更新接口：商家转账到零钱
微信官方又更新了接口... V3版本的微信商家转账到零钱的接口---俗称提现接口 注意事项 一:开通条件:需满足入驻满90天,连续正常交易30天,保持正常健康交易.二:分为页面发起和api接口操作,均 ...