react制作一个照片墙小demo

点击下面的指示灯会变大当前的图片会居于屏幕中间再按一下会变成黄色同时当前指示的照片会翻转到背面
是一个综合知识的考察用到了css3的2d和3d转换

// App.js
import React,{ Component } from 'react'
import ReactDOM from 'react-dom'
import "./index.scss"
import PicTab from "./picTab"class App extends Component {render(){return (<PicTab picJson={{picUrl:['./img/1.jpeg','./img/2.jpeg','./img/3.jpg','./img/4.jpg','./img/5.jpg','./img/6.jpg','./img/7.jpg','./img/8.jpg','./img/9.jpg',],text:['好看的动漫1','好看的动漫2','好看的动漫3','好看的动漫4','好看的动漫5','好看的动漫6','好看的动漫7','好看的动漫8','好看的动漫9'],bText:['我就是详细介绍1','我就是详细介绍2','我就是详细介绍3','我就是详细介绍4','我就是详细介绍5','我就是详细介绍6','我就是详细介绍7','我就是详细介绍8','我就是详细介绍9',]}}/>)}
}
ReactDOM.render(<App />,document.getElementById('root'));

import React,{ Component } from 'react'
class PicTab extends Component {constructor(){super();this.state={rotate:[],left:'',top:'',zIndex:'',index:0,rotateY:[]}}UNSAFE_componentWillMount(){this.random();}random(id){let newRotate=[],newLeft=[],newTop=[],newZindex=[],newRotateY=[];this.props.picJson.picUrl.forEach((item,index)=>{newRotateY.push(0)if(id===index){newRotate.push(0)newLeft.push('40%');newTop.push('20%')newZindex[index]=30;}else{newRotate.push(Math.random()*-720+360);newLeft.push(Math.random()*(window.innerWidth-340)+'px');newTop.push(Math.random()*(window.innerHeight-416)+'px')}})this.setState({rotate:newRotate,left:newLeft,top:newTop,zIndex:newZindex,rotateY:newRotateY})}css(){return `*{margin:0;padding:0;list-style:none;}body{background:#ccc;overflow:hidden;}.myUl{width:100%;height:100%;}.myUl>li{width:340px;height:416px;background:white;position:absolute;transform-style:preserve-3d;}.myUl>li .zm{width:100%;height:100%;position:absolute;left:0;top:0;transform:translateZ(1px)}.myUl>li>.zm img{width:285px;height:192px;position:absolute;left:50%;top:93px;transform:translateX(-50%)}.myUl>li>.zm .textNode{width:100%;position:absolute;text-align:center;bottom:24px;color:#4d544d;}.myUl>li .bm{width:100%;height:100%;position:absolute;left:0;top:0;transform:translateZ(-10px) rotateY(180deg);text-align:center;}.myOl{position:absolute;left:50%;transform:translateX(-50%);bottom:38px;height:22px;}            .myOl>li{width:22px;height:22px;float:left;background-color:#007d77;margin:0 8px;z-index:100;border-radius:50%;cursor:pointer;transition:.7s;}.myOl>li.active{transform:scale(1.5) rotateY(180deg);}.myOl>li.dactive{transform:scale(1.5) rotateY(360deg);background:yellow;}`}click(id,e){if(e.target.classList.contains('active')){if(e.target.classList.contains('dactive')){e.target.classList.remove('dactive');this.state.rotateY.splice(id,1,360);}else{e.target.classList.add('dactive');this.state.rotateY.splice(id,1,180);}this.setState({rotateY:this.state.rotateY})}else{this.random(id);this.setState({index:id})}}render(){let aLi=[],bLi=[];this.props.picJson.picUrl.forEach((v,i)=>{aLi.push(<li style={{transform:'perspective(800px) rotate('+this.state.rotate[i]+'deg) rotateY('+this.state.rotateY[i]+'deg)',left:this.state.left[i],top:this.state.top[i],transition:Math.random()*2+0.7+'s',zIndex:this.state.zIndex[i]}} key={i}><div className="zm"><img alt={i} src={v} /><div className="textNode">{this.props.picJson.text[i]}</div></div><div className="bm">{this.props.picJson.bText[i]}</div></li>)bLi.push(<li className={this.state.index===i?'active':''} key={i} onClick={this.click.bind(this,i)}></li>)});return (<div><style dangerouslySetInnerHTML={{__html:this.css()}}></style><ul className="myUl" ref="myUl">{aLi}</ul><ol className="myOl">{bLi}</ol></div>)}
}
export default PicTab

算是休闲可以尝试着敲敲代码

react制作一个照片墙小demo相关推荐

python连连看小游戏_利用Python制作一个连连看小游戏，边学边玩！
导语今天我们将制作一个连连看小游戏,让我们愉快地开始吧~ 开发工具 Python版本:3.6.4 相关模块: pygame模块: 以及一些Python自带的模块环境搭建安装Python并添加到环 ...
来个模态kuang_使用 React 制作一个模态框
使用 React 制作一个模态框模态框是一个常见的组件,下面让我们使用 React 实现一个现代化的模态框吧. 组件设计模态框想必大家都很熟悉,是工作中常用的组件,可以让我们填写或展示一些信息而不 ...
如何制作一个微信小程序【微信小程序是怎么做的】
为什么现在这么多人使用微信小程序呢?因为微信小程序除了便捷易开发,公司企业可以用来做小程序展示官网,商家也可以做小程序商城,甚至个人也可以拥有自己的小程序.那么如何制作一个微信小程序?微信小程序是怎么 ...
不用写一行代码，就能用ivx制作一个“微信小程序“，超牛逼
今天需要为大家介绍一款神器ivx. 它是通用无代码开发平台,是面向新一代全栈开发人员的通过不编写代码的方式实现快速开发的软件开发平台,提供图形化逻辑编排编程语言.抽象组件.集成开发环境等能力,能够支持 ...
小福利，用Excel VBA编程制作一个变色小游戏
小福利,用Excel VBA编程制作一个变色小游戏设计思想:在正方形的四条边上都是设置循环函数,不断改变颜色和单元格里面的数值. Option ExplicitSub 按钮1_Click() Dim ...
PyQt5制作一个爬虫小工具，爬取雪球网上市公司的财务数据
本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理. 以下文章来源于可以叫我才哥 ,作者:可以叫我才哥最近有朋友需要帮忙写个爬虫脚本,爬取雪球网一些上 ...
android打地鼠设计报告,android开发中利用handler制作一个打地鼠小游戏
android开发中利用handler制作一个打地鼠小游戏发布时间:2020-11-25 15:21:11 来源:亿速云阅读:136 作者:Leah 这期内容当中小编将会给大家带来有关androi ...
PyQt5制作一个爬虫小工具，获取某网上市公司的财务数据可视化
最近有朋友需要帮忙写个爬虫脚本,爬取雪球网一些上市公司的财务数据.盆友希望可以根据他自己的选择进行自由的抓取,所以简单给一份脚本交给盆友,盆友还需要自己搭建python环境,更需要去熟悉一些参数修改的 ...
微信小程序｜基于小程序+云开发制作一个菜谱小程序
今天吃什么?这是一个让强迫症左右为难的问题,跟随此文基于小程序+云开发制作一个菜谱小程序,根据现有食材一键生成菜谱,省心又省力. 一.小程序 1. 创建小程序

react制作一个照片墙小demo

react制作一个照片墙小demo相关推荐

最新文章

热门文章