<!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. SQLSTATE[42000]: Syntax error or access violation: 1055 Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated

    错误提示: SQLSTATE[42000]: Syntax error or access violation: 1055 Expression #1 of SELECT list is not in ...

  2. 二叉树系列之二叉搜索树BST

    特征: 1.每个元素有唯一键值 2.任意一个结点键值,比它左子树的所有结点的键值大,比它右子树的所有结点的键值小 数据的基本操作: 1>建树和插入.逐个插入其他所有数据.新插入的数据于一个最底层 ...

  3. PYTHON常用五大库

    python常用五大库 Numpy Numpy 是python科学计算的基础包,本书大部分内容都基于numpy以及构建于其上的库.其功能有: 快速高效的多维数组对象ndarray 用于对数组执行元素级 ...

  4. servlet - 从本地下载图片

    import javax.servlet.ServletException;import javax.servlet.ServletOutputStream;import javax.servlet. ...

  5. VSCode Snippet

    { // Place your snippets for javascript here. Each snippet is defined under a snippet name and has a ...

  6. SQL五十题记录 1-2

    前言: 创建以下四张表:①:课程表 ②:成绩表 ③:学生表 ④:教师表 1.查询课程编号为""01""的课程比"02"的课程成绩高的所有学生 ...

  7. 照亮体育馆 Barisal Stadium

    UVA10641 题目为逆时针顺序编号,这里直接将数组开两倍来处理环.(然而不知为啥开到1000也能过) 定义: Corners[i]Corners[i]Corners[i]为体育馆点的坐标. Lig ...

  8. mybatis-config.xml头信息

    1 <?xml version="1.0" encoding="UTF-8" ?> 2 <!DOCTYPE configuration 3 P ...

  9. js对象常用的方法

    1. Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象,它将返回目标对象.     语法: Object.assign(target, ...sources) ...

  10. 图模配置文件之 mdimport.ini

    mdimport.ini文件是图模导入中最最最关键的一个配置文件,其中既包含图模导入程序model_import.model_debug相关的配置,也包含红黑图管理界面显示及应用相关的配置信息,还包含 ...