首先放置一连的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. redis基准性能测试

    1 测试目的 了解redis在不同情况下的性能表现,并分析其性能瓶颈,找出相应的解决方案. 2 redis基准测试概览 运行下列命令可以了解自己的redis服务器的基本性能指标. 通过loopback ...

  2. 更加方便的使用git上传自己的代码

    经过以上的培训,同学们肯定对git的基本使用没有什么问题了.但是每次代码有更改后,依旧需要 git  add  * git  commit * git   打开vim编辑器,编辑提交信息 或者 git ...

  3. hdu4283

    You Are the One Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  4. DNN在推荐系统中的应用参考资料

    参考资料 DSSM算法计算文本相似度:https://www.cnblogs.com/wmx24/p/10157154.html Deep Neural Network for YouTube Rec ...

  5. office web apps 在线问答预览

    最近在做项目时,需要用到在线文档预览,看过明道的一篇搭建office web apps服务的文章,但是由于时间的关系,没有仔细研究,这几天有时间,就拿出来研究了下,折腾了几天终于完成了部署,然后就搬过 ...

  6. 0.9.0.RELEASE版本的spring cloud alibaba nacos实例

    简而言之,nacos与eureka的不同之处有三:后台老板.部署方式.功能.nacos是阿里的,eureka是奈飞的:nacos有自己的安装包,需要独立部署,eureka仅作为一个服务组件,引入jar ...

  7. Qt编写自定义控件55-手机通讯录

    一.前言 前面几篇文章中的控件基本上难度系数接近0,甚至有凑控件数量的嫌疑,这次必须来一个强悍的控件,本控件难度系数在所有控件中排前五,代码量也不少,头文件都550行,实现文件1600行,为什么这么多 ...

  8. 五句话搞定Python、JavaScript作用域

    这个银角的看家之作了吧,哈哈哈,剽窃下,原地址在这:点我点我 Python与JavaScript基本相同,但声明提前一项略有不同. JavaScript.Python中无块级作用域 在Java或C#中 ...

  9. Python 爬虫从入门到进阶之路

    https://www.cnblogs.com/weijiutao/p/10735455.html

  10. 【Leetcode_easy】804. Unique Morse Code Words

    problem 804. Unique Morse Code Words solution1: class Solution { public: int uniqueMorseRepresentati ...