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 现在找出终 ...
随机推荐
- 浅谈C++的智能指针
我们使用智能指针来自动运行管理内存,避免对原始指针的使用不当而造成内存泄漏. ------------------------------------------------------------- ...
- sftp无法连接问题
sftp连接linux 出现错误,就是服务器没有开sftp服务 解决:在linux服务器上,确保sftp定义在sshd的配置文件(一般为/etc/ssh/sshd_config)中:Subsystem ...
- thinkpaidE480office安装文件夹
C:\Program Files (x86)\Microsoft Office\root\Office16 需要嵌入office的小伙伴自行百度吧教程吧,网上有很多的
- docfx chocolatey安装方法
这两天在git下载的docfx.zip .在安装过程中总是闪退,而加入环境变量后,执行提示:config file docfx.json does not exist.所以我选择chocolatey ...
- 关于GitHub
gitHub是一个面向开源及私有软件项目的托管平台,因为只支持git 作为唯一的版本库格式进行托管,故名gitHub 对于程序员来说就相当于一个仓库可以把自己写的东西放到网上 要想使用GitHub必须 ...
- CodeForces - 1101B
题目: B. Accordion time limit per test 3 seconds memory limit per test 256 megabytes input standard in ...
- 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 ...
- express3/4引入socket.io
app.js var express = require('express'); var path = require('path'); var session = require('express- ...
- Windows浏览器无法连接VM虚拟机Centos并打开nginx页面
装的是centos6.7minimal版本,搜了下,需要关闭防火墙 于是 yum install iptables 然后关闭防火墙 service iptables stop 再打开浏览器,成功进入页 ...
- 如何启动linux的telnet服务--转载
如何启动linux的telnet服务 如何启动linux的telnet服务 步骤如下: 1.如果安装了telnet.telnet-server的rpm包,就跳到2.,否则安装这个包. 2.修改teln ...