zoukankan      html  css  js  c++  java
  • react抛物线小球实现

                .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: 999;
    
                }
    
                .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;
    
        100vw;
    
        line-height:100px;
    
        text-align:center;
    
        background:pink;
    
    
    
    `
    
    const Ball = styled.div`
    
        height:20px;
    
        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;
    
    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);
    

      

  • 相关阅读:
    EntityFramework Core Raw Query再叙注意事项后续
    EntityFramework Core 1.1有哪些新特性呢?我们需要知道
    ASP.NET Core MVC/WebAPi如何构建路由?
    EntityFramework Core解决并发详解
    EntityFramework Core Raw Query再叙注意事项
    EntityFramework Core Raw SQL
    ASP.NET Core MVC/WebAPi 模型绑定探索
    EntityFramework Core 1.1 Add、Attach、Update、Remove方法如何高效使用详解
    EntityFramework Core 1.1是如何创建DbContext实例的呢?
    神马玩意,EntityFramework Core 1.1又更新了?走,赶紧去围观
  • 原文地址:https://www.cnblogs.com/dongkx/p/10254120.html
Copyright © 2011-2022 走看看