<!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. div隐藏、显示

    JS隐藏和显示div的方式有两种: 需要注意的是用JS设置div的属性,必须在ccs中设置对应属性,否则报错. 同理可以设置相同class,进行批量设置. display--隐藏后释放占用的页面空间. ...

  2. AXI4_LITE总线vivado2019.1官方模板源码（verilog实现）

    AXI lite总线读写时序 1. AXI_SLAVE源码 `timescale 1 ns / 1 ps module myip_v1_0_S00_AXI # ( // Users to add pa ...

  3. 时序图，E-R图，数据流程图

    其中OSC是在线客服     数据流程图

  4. WebApi 下载三维zip文件并预览

    // 异步加载 const LoadObj = async (key?: string) => { LoadState.value = true var objStr, mtlStr var i ...

  5. vue中模块化后mapState的使用

    代码如下: 相当于声明了一个变量name,然后以state入参取得其modules文件夹中user文件里的name属性.因为在模块(如user)中,在抛出时的export default中添加了一句: ...

  6. javaweb本地启动很快，服务器上面启动特别慢

    在JVM环境中解决 打开$JAVA_PATH/jre/lib/security/java.security这个文件,找到下面的内容: securerandom.source=file:/dev/ura ...

  7. Jenkins集成appium自动化测试

    一,引入问题 自动化测试脚本绝大部分用于回归测试,这就需要制定执行策略,如每天.代码更新后.项目上线前定时执行,才能达到最好的效果,这时就需要进行Jenkins集成. 不像web UI自动化测试可以使 ...

  8. Jmeter----Badboy录制

    Badboy Badboy安装后出现错误,需要设置 Preferences-->General-->Enable Recording on Startup?的√去掉,play-->S ...

  9. data location nextcloud

    /var/snap/nextcloud/common/nextcloud/data/ Adding files to Nextcloud using the command line https:// ...

  10. k8s ingress

    ingress   ingress为k8s集群中的服务提供了入口,可以提供复制均衡,ssl终止和基于名称的虚拟主机,再生产环境中,常用的ingress有Treafik,Nginx,HAProxy,Is ...