點擊下面的 指示燈 會變大 當前的圖片會居于屏幕中間 再按一下會變成黃色 同時當前指示的照片會翻轉到背面
是一個綜合知識的考察 用到了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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。