<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        body {

            height: 1200px;

        }

    </style>

</head>

<body>

</body>

</html>

<script>

    // 面向对象的思想：

    //1、有哪些类：就只有一个弹力球类。

    //2、步骤

    // 定义类（弹力球类）：构造函数

    function Ball( size, left1, top1, color, step, directionLeft, directionTop, timeSpace) {

        // 属性:(把面向过程中的全局变量变成属性)

        this.dom = null;

        //球球的大小

        this.size = size;

        // 位置

        this.left1 = left1;

        this.top1 = top1;

        //颜色

        this.color = color;

        // 步长

        this.step = step;

        this.timeSpace = timeSpace;

        // 方向

        this.directionLeft = directionLeft;

        this.directionTop = directionTop;

        // 创建dom

        this.createDom = function(){

            this.dom = document.createElement("div");

            this.dom.style.cssText = `

                position: absolute;

                left: ${this.left1}px;

                top: ${this.top1}px;

                width: ${this.size}px;

                height: ${this.size}px;

                border-radius: 50%;

                background-color:${this.color};

            `;

            document.body.appendChild(this.dom);

        }

        // 球球开始谈

        this.go = function () {

            setInterval(() => {

                this.left1 = this.left1 + this.directionLeft * this.step;

                this.top1 = this.top1 + this.directionTop * this.step;

                // 边界判断

                // 1)、纵向

                let clientHeigth = document.documentElement.clientHeight || document.body.clientHeight;

                let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

                if (this.top1 + this.size > clientHeigth + scrollTop) {

                    // 下边界

                    this.top1 = clientHeigth + scrollTop - this.size;

                    this.directionTop = -1;

                } else if (this.top1 < scrollTop) {

                    //上边界

                    this.top1 = scrollTop;

                    this.directionTop = 1;

                }

                //2)、横向

                let clientWidth = document.documentElement.clientWidth || document.body.clientWidth;

                let scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

                if (this.left1 + this.size > clientWidth + scrollLeft) {

                    // 右边界

                    this.left1 = clientWidth + scrollLeft - this.size;

                    this.directionLeft = -1;

                } else if (this.left1 < scrollLeft) {

                    //左边界

                    this.left1 = scrollLeft;

                    this.directionLeft = 1;

                }

                this.dom.style.left = this.left1 + "px";

                this.dom.style.top = this.top1 + "px";

            }, this.timeSpace);

        }

        this.createDom();

        this.go();

    }

    window.onload = function () {

        for(var i=0;i<200;i++){

            // 1、随机大小(10-100)

            let size = parseInt(Math.random()*91)+10;

            // 2、随机位置；(横向：10-1000，纵向：10-600)

            let left1 = parseInt(Math.random()*991)+10;

            let top1 = parseInt(Math.random()*591)+10;

            // 3、随机颜色

            let color = getColor();

            // 4、随机步长(1-10)

            let step = parseInt(Math.random()*11)+1;

            // 5、随机方向

            let directionLeft = parseInt(Math.random()*2)==0?-1:1;  //0和1

            let directionTop = parseInt(Math.random()*2)==0?-1:1;  //0和1

            // 6、随机时间间隔(5-100)

            let timeSpace = parseInt(Math.random()*96)+5;

            let b1 = new Ball( size, left1, top1, color, step, directionLeft, directionTop, timeSpace);

        }

    }

    function getColor(){

        var str = "#";

        for(var i=0;i<6;i++){

            str += parseInt(Math.random()*16).toString(16);

        }

        return str;

    }

</script>

原生js弹力球的更多相关文章

  1. js课程 6-15 js简单弹力球如何实现

    js课程 6-15 js简单弹力球如何实现 一.总结 一句话总结:a.通过document的documentElement属性获取可是区域的高: b.通过增值变为负的实现到底部后反弹 1.docume ...

  2. js版弹力球实例

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>弹 ...

  3. JS实现弹性势能效果(弹力球效果[实现插件封装])

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  5. 常用原生JS方法总结（兼容性写法）

    经常会用到原生JS来写前端...但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的... 今天下班有点累... 就来总结一下简单的东西吧…… 备注:一下的方法都是包裹在一个EventU ...

  6. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

  7. 再谈React.js实现原生js拖拽效果

    前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...

  8. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  9. 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前

    思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...

随机推荐

  1. 脚本写一行echo也能写出bug ? glob了解一下

    背景 最近处理一个 bug 很有意思,有客户反馈某个配置文件解析失败了,出错的那行的内容就只有一个字母 a. 最开始以为是谁改动了处理的脚本,但要到了问题代码中的脚本,比较发现跟库上是一样的. 又经过 ...

  2. 三星最先进EUV产线投用

    近日,三星宣布,在韩国华城工业园新开一条专司 EUV(极紫外光刻)技术的晶圆代工产线 V1,最次量产 7nm. 据悉,V1 产线/工厂 2018 年 2 月动工,2019 年下半年开始测试晶圆生产,首 ...

  3. MongoDB复制集概念架构浅析

    一.复制集的作用 (1) 高可用 防止设备(服务器.网络)故障. 提供自动failover 功能. 技术来保证数 (2) 灾难恢复 当发生故障时,可以从其他节点恢复. (3) 功能隔离 用于分析.报表 ...

  4. Python数据基本类型3

    -*- coding:utf-8 -*-字典 键值对数据 dict dic = {'键':'值'}存储数据 字典的查找快一些不可哈希的,就是可变的数据 可变的数据不能哈希 不可变的数据能哈希 pyth ...

  5. css 实现九宫格

    1.自己写了一个,写完对比了下别人写的发现自己写的太low.故就不写自己太差劲的了. 别人写的我总结优化了一下,如果不用写内容去掉position,content简单也是可以的. <!DOCTY ...

  6. Scikit-learn之特征抽取

    一.安装包 pip install Scikit-learn 二.字典特征抽取 1.字典特征抽取 #!/usr/bin/env python # -*- coding: utf-8 -*- #auth ...

  7. python3.4.3 连接Oracle生成报表并发送邮件

    python很简单,又很实用.当有需求时用起来会更有方向,大可不必从语法.循环等基础看起. 由于工作需要,每天要拉一份报表发给业务的同事,先是用SSIS做了个包部署到服务器上,每天定时拉报表发邮件给同 ...

  8. Django 中自定义用户模型及集成认证授权功能总结

    1. 概述 Django 中的 django.contrib.auth 应用提供了完整的用户及认证授权功能. Django 官方推荐基于内置 User 数据模型创建新的自定义用户模型,方便添加 bir ...

  9. mysql schema设计中应避免的陷阱

    谨记红字: 1. 表中谨防太多列: MySQL 的存储引擎API 工作时需要在服务器层和存储引擎层之间通过行缓冲格式拷贝数据,然后在服务器层将缓冲内容解码成各个列.从行缓冲中将编码过的列转换成行数据结 ...

  10. ipadmini iOS8.4.1系统精简

    主要是删除一些系统自带的应用.语言,以及关闭不需要的进程. 精简之后运行流畅性还是能看得出有所提升的.(流畅的玩点游戏还是可行的) 文件的操作可以用Filza.iFile,也可以用爱思助手,但是爱思助 ...