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. 怎么使用chrome浏览器查看内存是否有泄漏

    一:什么是内存泄漏 javaScript会在创建变量时分配内存并且在不适用变量时会自动的释放内存,这个释放内存的过程极为垃圾回收,程序运行需要内存,只要程序提出要求操作系统或者运行时就必须提供内存,对 ...

  2. centos7 kubeadm 搭建k8s

    Centos 7 搭建 kubernetes 集群环境 一.介绍 本次是centos7 搭建kubernetes1.15.9 通过kubeadm 的形式搭建 二.准备 > centos 7 (镜 ...

  3. 【月光宝盒get√】用时间置换空间，聊聊稀疏数组的那些事儿

    背景 数据结构是指带有结构特性的数据元素的集合.在数据结构中,数据之间通过一定的组织结构关联在一起,便于计算机存储和使用.从大类划分,数据结构可以分为线性结构和非线性结构,适用于不同的应用场景. 线性 ...

  4. openEuler 20.03/21.03 - 华为欧拉开源版（CentOS 8 华为版开源版）下载

    开始 openEuler 之旅吧 openEuler 通过社区合作,打造创新平台,构建支持多处理架构.统一和开放的操作系统,推动软硬件应用生态繁荣发展. 好玩的活动停不下来 openEuler 社区不 ...

  5. Java面向对象编程（二）

    关键字 -- this 一.this关键字的使用: 1.this可以用来修饰.调用:属性.方法.构造器. 2.this修饰属性和方法: this理解为:当前对象 或 当前正在创建的对象. 2.1 在类 ...

  6. NOIP 模拟一 考试总结

    序列 考场上信心满满的打了nlogn的做法,我以为我稳了.据考试结束1h时发现看错题目了,打成了不连续的子序列.匆匆改了n2logn的做法.考试结束后,我发现我跪了.原来到终点才会发现我做的和人家不是 ...

  7. VMware vSphere 7 Update 3 下载

    请访问原文链接:https://sysin.org/blog/vmware-vsphere-7-u3/,查看最新版.原创作品,转载请保留出处. vSphere 7 Update 3 已经宣布可用,即将 ...

  8. AI 事件驱动场景 Serverless 实践

    作者 | 李鹏(元毅) 来源 | Serverless 公众号 一.事件驱动框架:Knative Eventing 事件驱动是指事件在持续事务管理过程中,进行决策的一种策略.可以通过调动可用资源执行相 ...

  9. 基于注解实现jackson动态JsonProperty

    基于注解实现jackson动态JsonProperty @JsonProperty 此注解用于属性上,作用是把该属性的名称序列化为另外一个名称,如把trueName属性序列化为name,但是值是固定的 ...

  10. SpringBoot之日志注解和缓存优化

    SpringBoot之日志注解和缓存优化 日志注解: 关于SpringBoot中的日志处理,在之前的文章中页写过: 点击进入 这次通过注解+Aop的方式来实现日志的输出: 首先需要定义一个注解类: @ ...