<!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跟随鼠标移动的更多相关文章

  1. div跟随鼠标移动

    1.目标是实现div跟随鼠标而移动,分三种情况进行实现 a)首先获取div,进行绑定鼠标移动事件,给div开启定位功能 第一种实现方式,假如body的大小跟页面大小一样,则可以用这个方法. 1)获取鼠 ...

  2. 一组div跟随鼠标移动，反应鼠标轨迹

    <!DOCTYPE html> <html> <head> <title>div随鼠标移动</title> <style type=& ...

  3. javascript 一串DIV跟随鼠标移动

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  4. javascript div跟随鼠标移动

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  5. 鼠标拖动div，div跟随鼠标移动效果

    <div id="boxDiv" style='width:20px;height:20px;position:absolute;background:red;'>   ...

  6. js 实现div跟随鼠标移动

    今天看到了一个自己可以随心所欲的拖到div到页面的任意位置.感觉挺好的,就心血来潮的查询了一下,看看网友做的 代码如下: <script>function doit(){ var obj ...

  7. jquery对div元素进行鼠标移动（稍稍修改下可以实现div跟随鼠标）

    /* 网上找了资料都是对于event.clientX和offset().left进行了计算,但是去掉了这个计算方式,直接使用当前坐标也一样,效果都一样不太好 strHeader:标题 jquery定位 ...

  8. 【案例】DIV随鼠标移动而移动

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 一款基于TweenMax跟随鼠标单击移动的div

    今天给大家分享一款基于TweenMax跟随鼠标单击移动的div.在这款实例中你可以单击任意位置,div会移动到你单击的位置.效果图如下: 在线预览   源码下载 实现的代码. html代码: < ...

  10. html页面设置一个跟随鼠标移动的DIV（jQuery实现）

    说明业务:鼠标放到某个标签上,显示一个div,并跟随鼠标移动 html页面(直接放body里面): <a href="#" id="'+data[i].refund ...

随机推荐

  1. .gitignore忽略文件无效的解决办法

    .gitignore中已经标明忽略的文件目录下的文件,git push的时候还会出现在push的目录中,原因是因为在git忽略目录中,新建的文件在git中会有缓存,如果某些文件已经被纳入了版本管理中, ...

  2. 圣诞树代码_HTML

    这个冬天给TA栽不一样的圣诞树 直接上效果 <!DOCTYPE html> <html lang="en" > <head> <meta ...

  3. 【LeetCode】 907 子数组的最小值之和

    Decrisption Given an array of integers arr, find the sum of min(b), where b ranges over every (conti ...

  4. windows 10 的VMware workstation Pro突然变成英文界面

    电脑的VMware虚拟机界面是中文版的,后来在捣弄些电脑配置,突然变成英文版界面了. 后面发现原来是区域格式选错了:正确的格式是下图红框

  5. Docker系列--容器编排工具Docker Compose详解

    1.Docker Compose 概述 Compose是一个用于定义和运行多容器Docker应用程序的工具.使用Compose,您可以使用Compose文件来配置应用程序的服务.然后,使用单个命令,您 ...

  6. python3GUI--实用！B站视频下载工具（附源码）

    目录 一．准备工作 二．预览 1.启动 2.解析 3.下载中 4.下载完成 5.结果 三．设计流程 1.bilibili_video_spider 2.视频json的查找 四．源代码 1.Bilibi ...

  7. vue导出文件

    /**导出 */ async toExcel() { // let result = await this.axios({ // method: 'get', // url: `issdc-manag ...

  8. PostgreSQL备份与恢复命令

    postgresql备份与恢复相关命令 --备份用户的数据库bct的所有内容pg_dump -U 用户名 -d 库名 -f xxxXXXxxx.sql--删除原有数据库dropdb -U 用户名 -f ...

  9. STM32任意引脚模拟IIC

    关于模拟I2C,任意接口都可模拟(未全部测试,可能存在特殊情况). 关于SDA_IN与SDAOUT:如下定义: 举例:#define MPU_SDA_IN() {GPIOA->CRL&= ...

  10. 导入ssm项目时，项目基本的配置文件

    一.ssm框架基本的配置文件 上面的这些配置文件对于比较简单的ssm项目其实大同小异,逻辑上是差不多的. 在config目录下 在lib下就是各种jar包 二.导入ssm项目后,本地环境配置和项目本身 ...