首先放置一连的image

<body>

    <div><img src="yezi.png" alt="tu"></div>

    <div><img src="yezi.png" alt="tu"></div>

    <div><img src="yezi.png" alt="tu"></div>

    <div><img src="yezi.png" alt="tu"></div>

    <div><img src="yezi.png" alt="tu"></div>

    <div><img src="yezi.png" alt="tu"></div>

</body>

然后设置样式，主要是图片的大小

<style>

        div {

            position: absolute;

            height: 20px;

            width: 20px;

        }

        img {

            height: %;

            width: %

        }

    </style>

最后就是实现行为

<script>

    document.onmousemove = function (eve) {

        var e = eve || window.event;

        var adiv = document.getElementsByTagName("div");

        //先把第一个div的位置拿到

        adiv[0].style.top = e.clientY + "px";

        adiv[0].style.left = e.clientX + "px";

        //遍历剩下的div，让每个div的位置等于前一个div的位置，即可实现跟随行为

        for (var i = adiv.length - 1; i > 0; i--) {

            adiv[i].style.top = adiv[i - 1].style.top

            adiv[i].style.left = adiv[i - 1].style.left

        }

    }

</script>

一个简单的小案例便完成了。效果图如下：

　　ps:div可以多给点，以防看不出效果

js实现——鼠标移动时跟随着一连的小图片的更多相关文章

  1. jquery.datetimepicker.js 当鼠标离开时，不选中当前时间，以达到清空的目的

    validateOnBlur:true    当鼠标离开时,不选中当前时间,以达到清空的目的 使用方法:   // 时间设置         $('#BankProduct_sale_begin'). ...

  2. 当鼠标聚焦时输入框变色（focus事件实例）

    当鼠标聚焦时输入框变色css相关,鼠标点击<input>输入域后出现有颜色的边框原理:css伪类之input输入框鼠标点击边框变色效果伪类元素的使用::focus 一:当输入框获得焦点时, ...

  3. js(jquery)鼠标移入移出事件时，出现闪烁、隐藏显示隐藏显示不停切换的情况

    <script> $(".guanzhu").hover(function(){ $(".weixinTop").show(); },functio ...

  4. jQuery的鼠标悬停时放大图片的效果

    这是一个基于jQuery的效果,当鼠标在小图片上悬停时,会弹出一个大图,该大图会跟随鼠标的移动而移动.这个效果最初源于小敏同志的一个想法,刚开始做的时候只能实现弹出的图片是固定的,不能随鼠标移动,最后 ...

  5. JS监测鼠标指针位置

    需求1:鼠标移入正方形的时候,蓝色小圆点跟随鼠标滚动(不许蓝色小圆点超出正方形区域),正方形里实时显示当前鼠标相对于body的坐标. <!DOCTYPE html> <html la ...

  6. 基于jQuery的鼠标悬停时放大图片的效果制作

    这是一个基于jQuery的效果,当鼠标在小图片上悬停时,会弹出一个大图,该大图会跟随鼠标的移动而移动.这个效果最初源于小敏同志的一个想法,刚开始做的时候只能实现弹出的图片是固定的,不能随鼠标移动,最后 ...

  7. js设置鼠标悬停改变背景色

    看了网上那么多的js鼠标悬停时事件,大多数的,说了那么多话,也没解决什么问题,现在直接贴上代码,以供参考 html: <div id="sign">this is te ...

  8. .net dataGridView当鼠标经过时当前行背景色变色；然后【给GridView增加单击行事件，并获取单击行的数据填充到页面中的控件中】

    1.首先在前台dataGridview属性中增加onRowDataBound属性事件 2.然后在后台Observing_RowDataBound事件中增加代码 protected void Obser ...

  9. 024. asp.net中第一次使用GridView (设置鼠标经过时更换背景色)

    1. 前端HTML代码 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Inde ...

随机推荐

  1. 在docker容器中编译hadoop 3.1.0

    在docker容器中编译hadoop 3.1.0 优点:docker安装好之后可以一键部署编译环境,不用担心各种库不兼容等问题,编译失败率低. Hadoop 3.1.0 的源代码目录下有一个 `sta ...

  2. C#中指针的简单使用

    原来C#不仅仅支持和C/C++中指针(或者说是引用)很像的委托delegate,还支持在unsafe代码块中使用指针,从而写非托管的代码(人为不让垃圾回收机制来管理相应的内存).在unsafe中就可以 ...

  3. geometry_msgs/PoseStamped 类型的变量的构造

    #navpoint.msg geometry_msgs/PoseStamped target_pose uint8 floor uint8 type target_pose 的类型为geometry_ ...

  4. python3 系统监控脚本（CPU，memory，网络，disk等）

    #!/usr/bin/env python3 #create at 2018-11-30 'this is a system monitor scripts' __author__="yjt ...

  5. 针对于linux初学者的学习（摘自网络端）

    一. 选择适合自己的Linux发行版谈到linux的发行版本,太多了,可能谁也不能给出一个准确的数字,但是有一点是可以肯定的,linux正在变得越来越流行, 面对这么多的Linux 发行版,打算从其他 ...

  6. tcp流式传输和udp数据报传输

    所有的书上都说, tcp是流式传输, 这是什么意思? 假设A给B通过TCP发了200字节, 然后又发了300字节, 此时B调用recv(设置预期接受1000个字节), 那么请问B实际接受到多少字节? ...

  7. php语言查询Mysql数据库内容

    通过php语言实现对Mysql数据库的基本操作 1.php页面在进行浏览时需要有php语言执行的环境,本人用的是WampServer软件,只要将项目复制到wampserver_php\wamp\www ...

  8. 粒子群优化算法及其java实现

    憋了两周终于把开题报告憋出来了,再一次证明自己不适合搞学术,哎--,花了点时间把报告中提到的粒子群算法看了看,看了些资料,用java跑起来. 算法简介 粒子群算法最先由Barnhart博士和Kenne ...

  9. Filename too long Resolution

    在git bash中,运行下列命令: git config --global core.longpaths true --global是该参数的使用范围,如果只对本版本库设置该参数,只要在上述命令中去 ...

  10. macbook配置homebrew

    打开homebrew官网,https://brew.sh/将安装脚本复制到命令行中,执行即可 命令正在运行,下载应用,如果在安装应用时,下载速度很慢,可以参考https://blog.csdn.net ...