简单鼠标跟随代码[通俗易懂]

简单鼠标跟随代码[通俗易懂]效果图:htmlcode:csscode:jscode

大家好,又见面了,我是你们的朋友全栈君。

效果图:

简单鼠标跟随代码[通俗易懂]

 

 

 

 

 

 

 

 

 

 

html code:

 1                <div id="div1" class="div"></div>
 2         <div id="div2" class="div"></div>
 3         <div id="div3" class="div"></div>
 4         <div id="div4" class="div"></div>
 5         <div id="div5" class="div"></div>
 6         <div id="div6" class="div"></div>
 7         <div id="div7" class="div"></div>
 8         <div id="div8" class="div"></div>
 9         <div id="div9" class="div"></div>
10         <div id="div10" class="div"></div>

css code:

 1 body {
 2                 position: relative;
 3             }
 4             
 5             div {
 6                 width: 20px;
 7                 height: 20px;
 8                 position: absolute;
 9             }
10             
11             #div1 {
12                 background: red;
13             }
14             
15             #div2 {
16                 background: blue;
17             }
18             
19             #div3 {
20                 background: pink;
21             }
22             
23             #div4 {
24                 background: hotpink;
25             }
26             
27             #div5 {
28                 background: yellow;
29             }
30             
31             #div6 {
32                 background: black;
33             }
34             
35             #div7 {
36                 background: gray;
37             }
38             
39             #div8 {
40                 background: deeppink;
41             }
42             
43             #div9 {
44                 background: lightskyblue;
45             }
46             
47             #div10 {
48                 background: green;
49             }

js code

 1 var divs = document.getElementsByClassName("div");
 2 
 3         document.onmousemove = function(e) {
 4             var even = e || event;
 5             for(var i = divs.length - 1; i > 0; i--) {
 6                 divs[i].style.left = divs[i - 1].style.left;
 7                 divs[i].style.top = divs[i - 1].style.top;
 8             }
 9             divs[0].style.left = even.clientX + "px";
10             divs[0].style.top = even.clientY + "px";
11         }

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/155295.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 互联网+(怎样保证小孩的安全)

    互联网+(怎样保证小孩的安全)

  • SpringBoot上传文件出错

    SpringBoot上传文件出错现象SpringBoot项目,今天做了一个与前端对接富文本的上传图片到服务器,返回一段URL给前端,一直运行着,前端一直请求接口一直上传图片做测试的时候,后台报了一个错误Couldnotparsemultipartservletrequest;nestedexceptionisjava.io.IOException:Thetemporaryuploadlocat…

  • Android UI布局优化之ViewStub[通俗易懂]

    Android UI布局优化之ViewStub[通俗易懂]尊重原创,转载请注明出处:http://blog.csdn.net/a740169405/article/details/50351013前言:在设计模式的单利模式中,懒汉式和饿汉式是其中两种。一种是在类被加载的时候就完成单例对象的初始化,一种是在需要使用该单例的时候才初始化。在android的视图设计中,同样需要使用的这样的设计模式。这样的视图加载起来需要耗费很多的时间。在这几…

  • ctpn详解

    ctpn详解一.概述对于复杂场景的文字识别,首先要定位文字的位置,即文字检测。这一直是一个研究热点。文本检测可以看成特殊的目标检测,但它有别于通用目标检测.在通用目标检测中,每个目标都有定义好的边界框,检测出的bbox与当前目标的groundtruth重叠率大于0.5就表示该检测结果正确.文本检测中正确检出需要覆盖整个文本长度,且评判的标准不同于通用目标检测,具体的评判方法参见(ICDAR2017…

    2022年10月22日
  • css 自定义滚动条样式

    css 自定义滚动条样式我遇到的场景:对于iframe窗口,自带滚动条是整个窗口的大小。有时需要顶部或底部固定,则滚动条不应该触碰到顶部或底部。那么首先打开iframe时应该去掉滚动条scrolling="n

  • php环境安装与配置_搭建环境是什么意思

    php环境安装与配置_搭建环境是什么意思配置时区打开php解压目录,找到php.ini-development文件,将其改名为php.ini,用记事本打开。找到(带分号);date.timezone=去掉前面的分好,修改为date.timezone=Asia/Shanghai测试:在根目录下的index.php文件夹中写入以下代码<?phpechodate(“Y:m:dH:i:s”…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号