首先放置一连的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. linux 编写定时任务，查询服务是否挂掉

    shell 脚本 #!/bin/bash a=`netstat -unltp|grep fdfs|wc -l` echo "$a" if [ "$a" -ne ...

  2. centos7使用yum提示有事物未完成的解决办法：

    错误提示: There are unfinished transactions remaining. You might consider running yum-complete-transacti ...

  3. 我的BO之状态控制

    我的BO 1-我的BO之强类型 2-我的BO之数据保护 3-我的BO之状态控制 4-我的BO之导航属性 MIS常有状态 信息管理系统(MIS)常常有流程,一个流程由多个环节构成,不同的环节的流转通过状 ...

  4. 使用SQL中的update更新多个字段值

    使用SQL中的update更新多个字段值,set后面的条件要用逗号不能用and set后面的多个条件之间没有关联也不可以有关联,所以就不能用and了:where 条件后面 可以为and 如: upda ...

  5. 按比例吃CPU

    前几天测试软件在多核上的性能,需要按照比例吃各个CPU,查了查资料,撸了下面一小段代码: #include <unistd.h> #include <stdlib.h> #in ...

  6. 如果前面的IO操作出问题了，按照我们代码的意思，不就try catch 了吗，这样的话线程就没关闭了，就会造成线程泄露。 那怎么解决这个问题呢，其实也简单，把关闭线程的方法写到finally里就可以了。

    https://mp.weixin.qq.com/s/WaNVT2bZFGHNO_mb5nK6vw 连HDFS源码大神都会犯的错之线程泄露(1) 西瓜老师 西瓜老师爱大数据 1月11日  

  7. python笔记7 logging模块 hashlib模块 异常处理 datetime模块 shutil模块 xml模块（了解)

    logging模块 日志就是记录一些信息,方便查询或者辅助开发 记录文件,显示屏幕 低配日志, 只能写入文件或者屏幕输出 屏幕输出 import logging logging.debug('调试模式 ...

  8. Spring Boot属性配置&自定义属性配置

    一.修改默认配置 例1.spring boot 开发web应用的时候,默认tomcat的启动端口为8080,如果需要修改默认的端口,则需要在application.properties 添加以下记录: ...

  9. Linux -- Proactor(及其与Reactor的比较)

    高并发服务器常由多线程+IO复用服务器(one event loop per thread) 两种I/O多路复用模式:Reactor和Proactor 一般地,I/O多路复用机制都依赖于一个事件多路分 ...

  10. SpringCloud学习成长 四 断路器（Hystrix）

    在微服务架构中,根据业务来拆分成一个个的服务,服务与服务之间可以相互调用(RPC),在Spring Cloud可以用RestTemplate+Ribbon和Feign来调用.为了保证其高可用,单个服务 ...