.ballFather{

                position: absolute;

                width: 15px;

                height: 15px;

                border-radius: 50%;

                transition: all  0.5s cubic-bezier(0.52, -0.3, 0.93, 0.54);

                z-index:;

            }

            .ballSon{

                width: 15px;

                height: 15px;

                background: #3190e8;

                border-radius: 50%;

                transition:all 0.5s linear;

            }
import React, { Component } from "react";

import { connect } from "isomorphism-sdk";

import styled, { keyframes, css } from "styled-components";

import {Track,Button} from '@components'

const Wrap = styled.div`

    text-align:center;

    color:green;

`;

const Btn = styled.div`

    position:fixed;

    bottom:0;

    left:0;

    height:100px;

    width:100vw;

    line-height:100px;

    text-align:center;

    background:pink;

`

const Ball = styled.div`

    height:20px;

    width:20px;

    background:red;

`

const BigBox= styled.div`

height:68px;

border:1px solid blue;

margin-bottom:40px;

text-align:left;

`

const SmallBox = styled.span`

display:inline-block;

height:50px;

width:160px;

background:grey;

`

const  TheBall={

	newBall(event,target){

		let div=document.createElement('div');

		div.className='ballFather';

		document.body.appendChild(div);

		let sonDiv=document.createElement('div');

		sonDiv.className='ballSon'

		div.appendChild(sonDiv);

		let top=event.target.getBoundingClientRect().top;

		let left=event.target.getBoundingClientRect().left;

		div.style.left=left+'px';

		div.style.top=top+'px';

		let y = (document.documentElement.clientHeight - top +100);//加100是为了防止掉不下去

        let x = (document.documentElement.clientWidth+7.5-left)

        // debugger

		div.style.display ='';

        const clientWidth = document.documentElement.clientWidth;

        const clientHeight = document.documentElement.clientHeight;

		div.style.transform = `translate3d(0,${y}px,0)`;

		sonDiv.style.transform = `translate3d(${x/2}px,0,0)`;

		setTimeout(()=>{

			document.body.removeChild(div);

		},500)

	}

}

class App extends Component {

    constructor(props) {

        super(props);

        this.state = {

            aaa:false

        };

    }

    aaa = (event) =>{

        TheBall.newBall(event,target)

        console.log(123)

    }

    render() {

        const { activity } = this.props;

        return (

          <Wrap>

                  <BigBox>

                      <SmallBox onClick={this.aaa.bind(this,{x:375,y:-50})}> 123</SmallBox>

                  </BigBox>

                  <BigBox>

                      <SmallBox onClick={this.aaa.bind(this)}>0</SmallBox>

                  </BigBox>

                  <BigBox></BigBox>

                  {         /**

                      <Track type='click' id='12671'>

                          <Button onClick={this.aaa.bind(this)}>我是一号</Button>

                      </Track>

                      <Track>

                          <Button onClick={this.aaa}>我是二号</Button>

                      </Track>

                      <Track>

                          <Button>我是三号</Button>

                      </Track>

                       <Button>我是死号</Button>

                       **/

                  }

              <Btn className='abs'>O</Btn>

          </Wrap>

        );

    }

}

export default connect(({ location, activity }, tasks) => {

    return {

        location,

        activity

    };

})(App);

  

react抛物线小球实现的更多相关文章

  1. React-简单通用的抛物线动画

    一个简单通用的 React 抛物线动画demo Usage import { parabola } from "./parabola" ... onAnimate = () =&g ...

  2. 【vue】饿了么项目-goods商品列表页开发

    1.flex 属性是 flex-grow.flex-shrink 和 flex-basis 属性的简写属性. flex-grow 一个数字,规定项目将相对于其他灵活的项目进行扩展的量. flex-sh ...

  3. Vue实现购物小球抛物线

    .shop{ position: fixed; top: 300px; left: 40px; } .ball{ position: fixed; left: 32px; bottom: 22px; ...

  4. vue 2.0 购物车小球抛物线

    备注:此项目模仿 饿了吗.我用的是最新的Vue, 视频上的一些写法已经被废弃了. 布局代码 <div class="ball-container"> <trans ...

  5. 小tips:用java模拟小球做抛物线运动

    这几天刚刚学习了java线程,然后跟着书做了几个关于线程的练习,其中有一个练习题是小球动起来.这个相信很简单,只要运用线程就轻松能够实现.然后看到了它的一个课后思考题,怎样让小球做个抛物线运动,这点我 ...

  6. js 抛物线 笔记备份

    var funParabola = function(element, target, options) { /* * 网页模拟现实需要一个比例尺 * 如果按照1像素就是1米来算,显然不合适,因为页面 ...

  7. Vue.JS React 精彩文章汇总

    JavaScript深入系列  [干货] JavaScript数组所有API全解密  [干货] 移动端:页面->手淘互动动效的探索 - IT大咖说 - 大咖干货,不再错过 [扫盲] Jonath ...

  8. Vue实现购物车小球动画

    思路: 1.因页面分组件分的比较细,由图可知是组件5到组件4的联动. 如果利用组件间通信需要 子组件5 -->组件3-->所有组件的父组件-->组件4, 层级略显复杂,所以使用了vu ...

  9. canvas抛物线运动轨迹

    本来是想做一个贝塞尔曲线运动轨迹的 公式太复杂了,懒得算,公式在最后 我先画了一个抛物线,我确定了两个点,起点(0,0),终点(200,200) 用坐标系可算出方程 y=-0.005x^2 现在找出终 ...

随机推荐

  1. 浅谈C++的智能指针

    我们使用智能指针来自动运行管理内存,避免对原始指针的使用不当而造成内存泄漏. ------------------------------------------------------------- ...

  2. sftp无法连接问题

    sftp连接linux 出现错误,就是服务器没有开sftp服务 解决:在linux服务器上,确保sftp定义在sshd的配置文件(一般为/etc/ssh/sshd_config)中:Subsystem ...

  3. thinkpaidE480office安装文件夹

     C:\Program Files (x86)\Microsoft Office\root\Office16     需要嵌入office的小伙伴自行百度吧教程吧,网上有很多的

  4. docfx chocolatey安装方法

    这两天在git下载的docfx.zip .在安装过程中总是闪退,而加入环境变量后,执行提示:config file  docfx.json does not exist.所以我选择chocolatey ...

  5. 关于GitHub

    gitHub是一个面向开源及私有软件项目的托管平台,因为只支持git 作为唯一的版本库格式进行托管,故名gitHub 对于程序员来说就相当于一个仓库可以把自己写的东西放到网上 要想使用GitHub必须 ...

  6. CodeForces - 1101B

    题目: B. Accordion time limit per test 3 seconds memory limit per test 256 megabytes input standard in ...

  7. Tomcat服务器提示:The server is temporarily unable to service your request due to maintenance downtime or capacity problems

    今天网站突然不能访问了,这里做一下记录提示: The server is temporarily unable to service your request due to maintenance d ...

  8. express3/4引入socket.io

    app.js var express = require('express'); var path = require('path'); var session = require('express- ...

  9. Windows浏览器无法连接VM虚拟机Centos并打开nginx页面

    装的是centos6.7minimal版本,搜了下,需要关闭防火墙 于是 yum install iptables 然后关闭防火墙 service iptables stop 再打开浏览器,成功进入页 ...

  10. 如何启动linux的telnet服务--转载

    如何启动linux的telnet服务 如何启动linux的telnet服务 步骤如下: 1.如果安装了telnet.telnet-server的rpm包,就跳到2.,否则安装这个包. 2.修改teln ...