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:; } .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抛物线小球实现的更多相关文章
- React-简单通用的抛物线动画
一个简单通用的 React 抛物线动画demo Usage import { parabola } from "./parabola" ... onAnimate = () =&g ...
- 【vue】饿了么项目-goods商品列表页开发
1.flex 属性是 flex-grow.flex-shrink 和 flex-basis 属性的简写属性. flex-grow 一个数字,规定项目将相对于其他灵活的项目进行扩展的量. flex-sh ...
- Vue实现购物小球抛物线
.shop{ position: fixed; top: 300px; left: 40px; } .ball{ position: fixed; left: 32px; bottom: 22px; ...
- vue 2.0 购物车小球抛物线
备注:此项目模仿 饿了吗.我用的是最新的Vue, 视频上的一些写法已经被废弃了. 布局代码 <div class="ball-container"> <trans ...
- 小tips:用java模拟小球做抛物线运动
这几天刚刚学习了java线程,然后跟着书做了几个关于线程的练习,其中有一个练习题是小球动起来.这个相信很简单,只要运用线程就轻松能够实现.然后看到了它的一个课后思考题,怎样让小球做个抛物线运动,这点我 ...
- js 抛物线 笔记备份
var funParabola = function(element, target, options) { /* * 网页模拟现实需要一个比例尺 * 如果按照1像素就是1米来算,显然不合适,因为页面 ...
- Vue.JS React 精彩文章汇总
JavaScript深入系列 [干货] JavaScript数组所有API全解密 [干货] 移动端:页面->手淘互动动效的探索 - IT大咖说 - 大咖干货,不再错过 [扫盲] Jonath ...
- Vue实现购物车小球动画
思路: 1.因页面分组件分的比较细,由图可知是组件5到组件4的联动. 如果利用组件间通信需要 子组件5 -->组件3-->所有组件的父组件-->组件4, 层级略显复杂,所以使用了vu ...
- canvas抛物线运动轨迹
本来是想做一个贝塞尔曲线运动轨迹的 公式太复杂了,懒得算,公式在最后 我先画了一个抛物线,我确定了两个点,起点(0,0),终点(200,200) 用坐标系可算出方程 y=-0.005x^2 现在找出终 ...
随机推荐
- linux常用命令 运算命令
linux的运算命令 expr命令,对整数进行运算 > expr的运算必须用空格间隔开 > \* 表示转义字符 > 保持先乘除后加减,如果需要优先运算则需要加命令替换符 > 也 ...
- vue 的全局组件和 局部组件
vue组件局部与全局注册的区别 //局部注册 var mycomponent = new extend({ <!--Vue.extend()是Vue构造器的扩展,调用Vue.e ...
- [Oracle][DATAGUARD] 关于确认PHYSICAL STANDBY的同期状况的方法
补上简单的确认PHYSICAL STANDBY的同期状况的方法: ODM TEST CASE===================Name = TC#1010_3 ####Primary#### SQ ...
- 分享:五个非常有用的WP插件
一全老师(www.yiquanseo.com)认为非常有用的几款WP插件,用WordPress做站的可以看下,估计你很可能用得到! 第一款WooCommerce Page Builder: 这款插件是 ...
- mysql 修改表字段长度
方案一: change ALTER TABLE t1 CHANGE a a VARCHAR(); change 可以用来更改字段名称和类型 ALTER TABLE table_name CHANGE ...
- Linux下挂载iso文件和配置yum本地源
Linux的版本: [root@pbn ~]# head -n 1 /etc/issueRed Hat Enterprise Linux Server release 6.1 (Santiago) 1 ...
- 练习 HashSet 去重复
package com.rf.xs.list; import java.util.HashSet; public class Person { private String name; private ...
- Python常用数据类型
一 .列表 name = ['zhangshan', 'lishi', 'wangwu']# 列表赋值 name.append('liujun')# 增,默认增加到最后位置 name.insert(1 ...
- linux 清理几天前的日志或文件
执行清理1天前的 war 包 find . -ctime +1 -name "*.war" -exec rm {} \;
- python基础(字符串常用方法)
字符串不常用方法: 字符串常用的方法: #看源代码 按住ctrl点击方法名 用户注册的小程序 import datetimeusers = []passwds = []for i in range(3 ...