js 实现边缘撞击检测动画

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>小潘</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        body {

            overflow: hidden; /* 防止撞击产生滚动条 */

        }

        div {

            width: 100px;

            height: 100px;

            background-color: red;

            position: absolute;

            left: 0;

            top: 0;

        }

    </style>

</head>

<body>

    <div></div>

    <script>

        var speedx = 3;

        var speedy = 5;

        const move = () => {

            var div = window.getComputedStyle(document.getElementsByTagName("div")[0]);

            check(div);

            var tleft = parseInt(div.left);

            var left = speedx + tleft;

            var ttop = parseInt(div.top);

            var top = speedy + ttop;

            document.getElementsByTagName("div")[0].style.left = left + 'px';

            document.getElementsByTagName("div")[0].style.top = top + 'px';

        }

        var mymove = setInterval(() => {

                        move();

                    }, 20);

        const check = (div) => {

            var left = parseInt(div.left);

            var top = parseInt(div.top);

            var w = parseInt(div.width);

            var h = parseInt(div.height);

            if (left < 0) {

                speedx *= -1;

                left = 0;

            }

            if (top < 0) {

                speedy *= -1;

                top = 0;

            }

            if(left > window.innerWidth - w) {

                left = window.innerWidth - w;

                speedx *= -1;

            }

            if(top > window.innerHeight - h) {

                top = window.innerHeight - h;

                speedy *= -1;

            }

        }

    </script>

</body>

</html>

js 实现边缘撞击检测动画的更多相关文章

  1. Adobe Edge Animate –解决图形边缘精确检测问题-通过jquery加载svg图片

    Adobe Edge Animate –解决图形边缘精确检测问题-通过jquery加载svg图片 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 在edge ...

  2. WOW.js轻松为网页添加动画切入效果

    由于坐忘的需要,经常会有部分功能用的很多,做起来又很繁琐,所以插件也就应运而生了.个人感觉正式js强大的可植入性, 才使他如此的使用火爆,反正博主是特别喜欢这一点  Y(^o^)Y~ . 今天就和大家 ...

  3. Atitit.android js 的键盘按键检测Back键Home键和Menu键事件

    Atitit.android js 的键盘按键检测Back键Home键和Menu键事件 1. onKeyDown @Override public boolean onKeyDown(int keyC ...

  4. Vue.js表单校验；动画指令；避免内存泄露。

    Vue.js表单校验: 动画指令:创建自定义的滚动指令. 避免内存泄露. 避免内存泄露 在单页面应用开发时SPA,用户无需刷新浏览器.所以javascript应用需要自行清理组件来防止内存占用不断增长 ...

  5. JS和css实现检测移动设备方向的变化并判断横竖屏幕

    这篇文章主要介绍了JS和css实现检测移动设备方向的变化并判断横竖屏幕,本文分别给出实现代码,需要的朋友可以参考下 方法一：用触发手机的横屏和竖屏之间的切换的事件  [自测可用, chrome , 手 ...

  6. 基于Babylon.js编写简单的骨骼动画生成器

    使用骨骼动画技术可以将网格的顶点分配给若干骨头,通过给骨头设定关键帧和父子关系,可以赋予网格高度动态并具有传递性的变形 效果.这里结合之前的相关研究在网页端使用JavaScript实现了一个简单的骨骼 ...

  7. 使用two.js生成的卫星环绕动画效果

    来源:GBin1.com two.js是一个帮助你实现绘图和动画效果的类库,同时支持三种前端绘图实现: webgl svg 2d画布 使用这个类库,可以方便的支持这三种不同的实现,你只需要设置参数:T ...

  8. js进阶 13-5 jquery队列动画如何实现

    js进阶 13-5 jquery队列动画如何实现 一.总结 一句话总结:同一个jquery对象,直接写多个animate()就好. 1.什么是队列动画? 比如说先左再下,而不是左下一起走 2.怎么实现 ...

  9. js进阶 13-4 jquery自定义动画animate()如何使用

    js进阶 13-4 jquery自定义动画animate()如何使用 一.总结 一句话总结:animate(params,[speed],[easing],[fn]),参数:params:一组包含作为 ...

随机推荐

  1. 测试验收标准checklist

    需求实现功能清单 功能实现目的 需求改造功能清单 关联功能清单 关联系统 端到端全流程场景 业务联系性场景 业务全流程场景 上下需求关联规则 业务角度在流程中关注项 财报.评级 授信方案 反洗钱 面向 ...

  2. P3348-[ZJOI2016]大森林【LCT】

    正题 题目链接:https://www.luogu.com.cn/problem/P3348 题目大意 有\(n\)棵树开始只有一个编号为\(1\)的节点且为标记点.\(m\)次操作要求支持 在\(l ...

  3. FastAPI（56）- 使用 Websocket 打造一个迷你聊天室

    背景 在实际项目中,可能会通过前端框架使用 WebSocket 和后端进行通信 这里就来详细讲解下 FastAPI 是如何操作 WebSocket 的 模拟 WebSocket 客户端 #!usr/b ...

  4. 全套Java教程_Java基础入门教程，零基础小白自学Java必备教程 #011 # 第十一单元 String&ArrayList #

    一.本单元知识点概述 (Ⅰ)知识点概述 二.本单元教学目标 (Ⅰ)重点知识目标 1.ArrayList集合的常用方法2.ArrayList存储数据和遍历数据3.String类的构造方法4.String ...

  5. NOIP模拟72

    T1 出了个大阴间题 解题思路 看了看数据,大概是个状压 DP,但是感觉记忆化搜索比较好写一点(然而并不是这样递归比迭代常熟大了许多..) 不难判断出来 b 的数值与合并的顺序无关于是我们可以预先处理 ...

  6. C语言日记① 初识C

    概念 c语言是一种计算机语言 也就是人与计算机打交道的语言 在早期,因为计算机使用的二进制 所以早期写代码都是科学家来写的使用对应的功能二进制代码 需要用到手册,所以开发不方便 在后来,人们发明了汇编 ...

  7. 题解 Division Game

    link Description 懒得写了. Solution 设 \(f(x)\) 表示对于一个位置操作了 \(x\) 次后刚好变为 \(1\) 的方案数,可以看出的是 \(f(x)\) 同样也是对 ...

  8. 洛谷2093 JZPFAR + KD-Tree学习笔记 (KD-Tree)

    KD-Tree这玩意还真的是有趣啊.... (基本完全不理解) 只能谈一点自己的对KD-Tree的了解了. 首先这个玩意就是个暴力... 他的结构有点类似二叉搜索树 每一层都是以一个维度作为划分标准. ...

  9. Android QMUI实战：沉浸式/适配状态栏

    近期研究QMUI换肤的实现,顺便分析了下QMUI的沉浸式. 网上已有很多关于QMUI实现页面沉浸式的文章,简而言之:复杂了. 本期,我们仅通过几行代码,即可完美实现页面沉浸式效果,并轻松匹配换肤的色彩 ...

  10. Scrum Meeting 0501

    零.说明 日期:2021-5-1 任务:简要汇报两日内已完成任务,计划后两日完成任务 一.进度情况 组员 负责 两日内已完成的任务 后两日计划完成的任务 qsy PM&前端 整装待发,准备冲刺 ...