.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. linux常用命令 运算命令

    linux的运算命令 expr命令,对整数进行运算 > expr的运算必须用空格间隔开 > \* 表示转义字符 > 保持先乘除后加减,如果需要优先运算则需要加命令替换符 > 也 ...

  2. vue 的全局组件和 局部组件

    vue组件局部与全局注册的区别   //局部注册 var mycomponent = new extend({        <!--Vue.extend()是Vue构造器的扩展,调用Vue.e ...

  3. [Oracle][DATAGUARD] 关于确认PHYSICAL STANDBY的同期状况的方法

    补上简单的确认PHYSICAL STANDBY的同期状况的方法: ODM TEST CASE===================Name = TC#1010_3 ####Primary#### SQ ...

  4. 分享:五个非常有用的WP插件

    一全老师(www.yiquanseo.com)认为非常有用的几款WP插件,用WordPress做站的可以看下,估计你很可能用得到! 第一款WooCommerce Page Builder: 这款插件是 ...

  5. mysql 修改表字段长度

    方案一: change ALTER TABLE t1 CHANGE a a VARCHAR(); change 可以用来更改字段名称和类型 ALTER TABLE table_name CHANGE ...

  6. Linux下挂载iso文件和配置yum本地源

    Linux的版本: [root@pbn ~]# head -n 1 /etc/issueRed Hat Enterprise Linux Server release 6.1 (Santiago) 1 ...

  7. 练习 HashSet 去重复

    package com.rf.xs.list; import java.util.HashSet; public class Person { private String name; private ...

  8. Python常用数据类型

    一 .列表 name = ['zhangshan', 'lishi', 'wangwu']# 列表赋值 name.append('liujun')# 增,默认增加到最后位置 name.insert(1 ...

  9. linux 清理几天前的日志或文件

    执行清理1天前的 war 包 find . -ctime +1 -name "*.war" -exec rm {} \;

  10. python基础(字符串常用方法)

    字符串不常用方法: 字符串常用的方法: #看源代码 按住ctrl点击方法名 用户注册的小程序 import datetimeusers = []passwds = []for i in range(3 ...