JS实现小球移动（点击移动，点击停止）

最新推荐文章于 2023-07-26 08:00:47 发布
最新推荐文章于 2023-07-26 08:00:47 发布
阅读量3.4k 收藏 11
点赞数 16
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/FanZaiYo/article/details/123852183
版权

这么简单的东西，一堆收费的，还特么有很多都是直接cv别人免费的拿来收费，这么缺？

<style>
    div{
        width: 100px;
        height: 100px;
        border: 1px solid black;
        border-radius: 50%;
        text-align: center;
        line-height: 70px;
        cursor: pointer;
        
    }
</style>
<body>
    <div id="qiudiv" onclick="moo()" click="" style="position: absolute;">
       <p id="mo">点我移动</p> 
    </div>
</body>
<script>
    //接收
    var borName = document.getElementById("mo");
    //定义初始div位置
    qiuX=0;
    var i = 0;
    var count = 0;
    function moo(){
        count++;
        if(count % 2 != 0){
            borName.innerHTML ="停止移动";
            i = setInterval(function(){
                qiuX+=1;
                //修改div的left top
                qiudiv.style.left=qiuX+"px";
                
            }, 10);
        }else{
            clearInterval(i);
            borName.innerHTML = "点我移动";
        }
        
    }
        

</script>

帆仔哟
关注
  • 16
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
如何利用js实现小球运动【全网最详解析】
weixin_54139195的博客
08-11 2638
js实现小球运动随着人工智能的不断发展，web前端这门技术也越来越重要，很多人都开启了学习web前端，本文就介绍web前端的基础内容。以上就是今天要讲的内容，本文仅仅简单介绍了js怎样实现小球运动，以上用到了DOM距离，分别为：元素的可视距离: tag.clientHeight,tag.clientWidth ，元素控件距离: tag.offsetHeight,tag.offsetWidth，被撑开的距离: tag.scrollHieght,tag.scrollWidth。.........
原生js实现小球在屏幕上自由移动，当遇到屏幕边缘时反弹
杜伊沫的博客
04-03 4149
小球在桌面上自由移动，要清楚的几个问题 1、小球在桌面移动的最大距离是多少 2、小球移动的步长是多少 3、当小球碰到屏幕边缘时怎么实现反弹 4、 如何实现多个小球 5、怎么实现小球的颜色及大小 关于第一步实现小球在桌面上移动的最大距离的思路 1、首先要获取桌面的宽度与高度，注意获取屏幕的宽度与高度需要封装一下，如下所示 宽：document.documentElement.clientWidth ...
用js实现小球的自由移动代码
10-27
本篇文章小编为大家介绍，用js实现小球的自由移动代码。需要的朋友参考下
css3动画 小球滚动 js控制动画暂停
11-21
CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。 CSS3 @keyframes 规则 要创建 CSS3 动画，你需要了解 @keyframes 规则。 @keyframes 规则是创建动画。 @keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。 @keyframes myfirst /* myfirst 为动画名 */ { from {background: red;} to {background: yellow;} } @-webkit-keyframes myfirs
JavaScript实现小球停止与移动
最新发布
让我来踩坑
07-26 503
基于JavaScript实现页面小球的停止与移动
js实现小球移动
weixin_69218754的博客
09-26 835
js实现小球移动
css3动画 小球滚动 ，js控制动画暂停
peppa_pig的博客
11-27 982
CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。 CSS3 @keyframes 规则 要创建 CSS3 动画，你需要了解 @keyframes 规则。 @keyframes 规则是创建动画。 @keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。 @keyframes myfirst ...
js实现跟随鼠标移动的小球
10-16
通过调整条件判断，你可以控制元素在特定区域内的行为，或者添加其他复杂的逻辑，比如限制小球移动的速度、范围或者添加碰撞检测。此外，对于现代Web开发，还可以考虑使用像React或Vue这样的前端框架，结合它们的...
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
10-18
主要介绍了原生JS实现的多个彩色小球跟随鼠标移动动画效果,涉及javascript事件响应、页面元素属性动态修改及随机数应用等相关操作技巧,需要的朋友可以参考下
js实现单击移动和暂停小球并显示小球的左边界距离距离上边距距离元素可见宽度元素可见高度元素的偏移容器
kkkliao1的博客
06-13 242
js实现单击移动和暂停小球并显示小球的左边界距离距离上边距距离元素可见宽度元素可见高度元素的偏移容器,北大青鸟通州校区廖万里
js实现圆形显示鼠标单击位置
10-15
主要为大家详细介绍了js实现圆形显示鼠标单击位置，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS原生实现多个小球跟着鼠标移动.html
05-19
JS原生实现多个小球跟着鼠标移动
JS鼠标事件
小罗的博客
05-10 2507
📗目录 鼠标事件 鼠标点击 鼠标定位 🍊鼠标事件 dblclick 双击鼠标左键时发生，如果右键也按下则不会发生 mousedown 单击任意一个鼠标按钮时发生 mouseout 鼠标指针位于某个元素上且将要移出元素的边界时发生 mouseover 鼠标指针移出某个元素到另一个元素上时发生 mouseup 松开任意一个鼠标按钮时发生 mousemove 鼠标在某个元素上时持续发生 onmouseover 注册鼠标经过时事件处理函数 onmouseout 注册鼠标移开时事件处理函数
js事件(Event)知识整理
weixin_30824277的博客
01-11 82
鼠标事件鼠标移动到目标元素上的那一刻，首先触发mouseover之后如果光标继续在元素上移动，则不断触发mousemove如果按下鼠标上的设备(左键,右键,滚轮……)，则触发mousedown当设备弹起的时候触发mouseup目标元素的滚动条发生移动时(滚动滚轮/拖动滚动条。。)触发scroll滚动滚轮触发mousewheel，这个要区别于scroll鼠标移出元素的那一刻，触发mou...
按钮实现小球移动html,小球移动.html · 18计算机应用技术一班/TextJavaScript2 - Gitee.com...
weixin_29879697的博客
06-29 226
Document#box{position: absolute;width: 120px;height: 120px;line-height: 120px;background-color: red;color: #ffffff;border-radius: 50%;text-align: center;}点我啊，跑！function animate(obj,option){obj.timer =...
一个简单的JS（盒子移动）
qq_47997447的博客
10-16 1252
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } #content { /*要定位，不然left不起作用。*/ /*position: absolu.
js鼠标移动到指定位置_基于"发布-订阅"的原生JS插件封装
weixin_39796116的博客
11-30 222
大家好，我是神三元。 今天我们来做一个小玩意，用原生JS封装一个动画插件。效果如下： 这个飞驰的小球看起来是不是特有灵性呢？没错，它就是用原生JS实现的。 接下来，就让我们深入细节，体会其中的奥秘。相信这个实现的过程，会比动画本身更加精彩!一、需求分析封装一个插件，将小球的DOM对象作为参数传入，使得小球在鼠标按下和放开后能够运动，在水平方向做匀减速直线运动，初速度为鼠标移开瞬间的速度，在竖直方向...
js小效果之跟随鼠标移动的小球
热门推荐
主要领域：前端开发
08-07 1万+
<!DOCTYPE html> <html> <head> <title>follow mouse</title> </head> <style type="text/css"> *{ margin: 0; padding:0; } #div1{wid...
写一个使用js实现小球移动的代码
06-09
好的，下面是一个使用JavaScript实现小球移动的代码： ```html <!DOCTYPE html> <html> <head> <title>小球移动</title> </head> <body> <canvas id="canvas" width="400" height="400"></canvas> <script> const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); let x = canvas.width / 2; let y = canvas.height / 2; let dx = 2; let dy = -2; const ballRadius = 10; function drawBall() { ctx.beginPath(); ctx.arc(x, y, ballRadius, 0, Math.PI * 2); ctx.fillStyle = "red"; ctx.fill(); ctx.closePath(); } function draw() { // 清除画布 ctx.clearRect(0, 0, canvas.width, canvas.height); // 画小球 drawBall(); // 移动小球 x += dx; y += dy; // 检测碰撞 if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) { dx = -dx; } if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) { dy = -dy; } requestAnimationFrame(draw); } draw(); </script> </body> </html> ``` 这个代码会在页面上画一个小球，并让它沿着画布边缘来回移动。当小球碰到画布边缘时，它会反弹。可以通过修改 `dx` 和 `dy` 的值来改变小球移动的速度和方向。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值