一连串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 ...
随机推荐
- Unity中常用的几种读取本地文件方式
使用的命名空间如下 using LitJson;using System.Collections.Generic;using System.IO;using System.Text;using Uni ...
- 【逆向】HWP文档 分析调试技巧
前言 HWP(Hangul Word Processor)文件是韩国主流文字处理软件Hangul Office(한글)专用的文档格式,Hangul 是一款由韩软公司(Hansoft)开发,在韩国人人皆 ...
- AutoCAD_2020_Simplified_Chinese_Win_64bit_dlm
「AutoCAD_2020_Simplified_Chinese_Win_64bit_dlm」https://www.aliyundrive.com/s/zN8zAGgXZ58 点击链接保存,或者复制 ...
- 内部类（Java）
内部类 基本介绍 概念:在一个类的内部再定义一个完整类 特点:编译之后可生成独立的字节码文件:内部类可以直接访问外部类的私有属性,不破坏封装性 分类:成员内部类:静态内部类:局部内部类:匿名内部类 p ...
- 去除input框相关样式，只显示内容
<input /> css代码: .edit-input{ /* width: 20px; */ height: -webkit-fill-available; background: i ...
- python 前言
# python前言简介: ## 文件的概诉 ```py# 什么是文件 .文件夹? 其实是操作系统暴露给用户可以简单快捷操作硬盘的"接口"``` ## 计算机内部储存数据的原理 ` ...
- Post 大小超出允许的限制
原因大体找到了: 除了项目最外层有web.config, 在 Pages页面下还有一个web.config配置文件, 遍历顺序为 :aspx 页面同级目录-->逐级父级目录-->根目录-- ...
- 剑指offer----1.二维数组查找
题目:在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. ...
- [C#] Func及Action的快速Demo
参考代码1: using System;using System.Collections.Generic;using System.Linq;namespace FuncActionDemo{ ...
- Spring bean注入问题：NoUniqueBeanDefinitionException解决方案归纳
引言 spring实现的bean自动注入在项目开发中是一个经常使用到的功能,但自动装配两个或多个bean时,会抛出NoUniqueBeanDefinitionException:No qualifyi ...