js小效果之跟随鼠标移动的小球

落日映苍穹つ 2021-09-30 15:54 382阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
        <title>follow mouse</title>
    </head>
    <style type="text/css"> *{ margin: 0; padding:0; } #div1{ width: 50px;height: 50px;background: red;color:#fff;text-align: center;line-height: 50px; position: absolute;transition: all 0.5s; } #div2{ width: 50px;height: 50px;background: green;color:#fff;text-align: center;line-height: 50px;position: absolute;transition: all 0.5s; } .box1{ width: 400px; height: 400px; border: 1px solid #ccc; } .box2{ width: 400px; height: 400px; border: 1px solid #ccc; } </style>
    
    <body>
        <div class="box1" onmousemove="b1()">
            <div id="div1" >1</div>
        </div>
        <div class="box2" onmousemove="b2()">
            <div id="div2">2</div>
        </div>
    </body>
    <script type="text/javascript"> function b1(ev) { var oEvent = ev || event; var oDiv = document.getElementById('div1'); if( oEvent.clientX<350&&oEvent.clientY<350){ oDiv.style.left = oEvent.clientX + 'px'; oDiv.style.top = oEvent.clientY + 'px'; } } function b2(ev){ var oEvent=ev||event; var oDiv=document.getElementById('div2'); if( oEvent.clientX<350&&oEvent.clientY<750){ oDiv.style.left=oEvent.clientX+'px'; oDiv.style.top=oEvent.clientY+'px'; } } </script>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70]: /images/20210812/c6b6e34104f740c988d50cf70e753583.png

发表评论取消回复

表情：

评论列表（有 0 条评论，382人围观）

还没有评论，来说两句吧...

相关阅读

相关 Js实现跟随鼠标移动的小球------Sestid

下就是全部代码（纯Js） <!DOCTYPE html> <html> <head> <title>follow mouse<...

我会带着你远行/ 2024年04月18日 21:53/ 0 赞/ 73 阅读

相关 JS制作跟随鼠标移动的图片

JS制作跟随鼠标移动的图片有趣的小案例池子： [JS实现定时器 ][JS_] [JS实现关闭图片窗口 ][JS_ 1] [JS实现输入检验 ][JS_

今天药忘吃喽~/ 2024年03月31日 15:42/ 0 赞/ 81 阅读

相关数据结构实验之移动小球

数据结构实验之移动小球 Description 给你n个小球，从左到右编号依次为1,2,3,4,5,6…n排成一行。现在有以下2种操作：A x y表示把编号为x小球移

我会带着你远行/ 2022年12月13日 12:48/ 0 赞/ 94 阅读

相关 JavaScript canvas实现跟随鼠标移动小球

本文实例为大家分享了js跟随鼠标移动小球的具体代码，供大家参考，具体内容如下 1 2 3 4 5 6 7 8 9 10 11 12

冷不防/ 2022年10月29日 07:51/ 0 赞/ 231 阅读

相关 Android开发——自定义View之实现跟随手指移动的小球

案例： ![Center][] 实现的功能：手指在屏幕上滑动，红色的小球始终跟随手指移动。实现的思路： 1）自定义View，在onDraw中画圆作为小球； 2）

忘是亡心i/ 2022年06月06日 07:06/ 0 赞/ 478 阅读

相关 jQuery_鼠标跟随效果

鼠标跟随效果： HTML： <body> <img src="images/ts.gif" alt=""> </body> JS： $

Dear 丶/ 2022年05月20日 23:55/ 0 赞/ 256 阅读

相关 js鼠标跟随特效鼠标滑过出现小星星动画

页面代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <

约定不等于承诺〃/ 2022年05月17日 20:04/ 0 赞/ 401 阅读

相关 JS实现的多个彩色小球跟随鼠标移动动画效果示例

p \{ border-radius: 50%; width: 30px; height: 30px; position: absolute; text-a

朱雀/ 2021年12月12日 07:29/ 0 赞/ 283 阅读

相关 js小效果之跟随鼠标移动的小球

<!DOCTYPE html> <html> <head> <title>follow mouse</title> </head

落日映苍穹つ/ 2021年09月30日 15:54/ 0 赞/ 383 阅读

相关网站动态背景粒子线条跟随鼠标移动，吸附鼠标效果代码

> 说明作者：姜成SEO 原文链接：[https://blog.csdn.net/qq\_40223005/article/details/80810695][https

Myth丶恋晨/ 2021年09月22日 00:54/ 0 赞/ 493 阅读