react 实现点击放大效果

小鱼儿 2022-04-22 21:14 954阅读 0赞

(一)简单的点击放大demo1

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70][]

import React, { Component } from 'react';
    import './App.css'
    import img2 from './2.jpeg'
    import Zmage from 'react-zmage'
    class App extends Component {
    	render() {
    		return (
    			<div >
    				<Zmage src={img2}/>
    			</div>
    		);
    	}
    }
    
    export default App;

（二）点击缩略图，放大图片，大图以轮播的形式展现

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 2][]

App.js

import React, { Component } from 'react';
    import './App.css'
    import { Icon } from 'semantic-ui-react'
    import "semantic-ui-css/semantic.min.css";
    import Swiper from 'react-id-swiper';
    import './Swiper.css'
    import Modal from 'react-modal';
    import img2 from './2.jpeg'
    import img3 from './3.jpeg'
    Modal.setAppElement('div');
    class App extends Component {
    	constructor(props) {
    		super(props);
    		this.state = {
    			modalIsOpen: false,
    			modalImgs: [],
    			direction: ''
    		};
    		this.openModal = this.openModal.bind(this);
    		this.closeModal = this.closeModal.bind(this);
    		this.Open = this.Open.bind(this);
    		this.close = this.close.bind(this);
    	}
    	openModal() {
    		this.setState({ modalIsOpen: true });
    	}
    
    	closeModal() {
    		this.setState({ modalIsOpen: false });
    	}
    	Open(dire) {
    		this.setState({ modalIsOpen: true, direction: dire })
    	}
    	close() {
    		this.setState({ modalIsOpen: false })
    	}
    	render() {
    		const modalflag = this.state.direction === 'left' ? true : false;
    		const modalnumber = (modalflag === false ? 1 : 0)
    		const params = {
    			rtl: true,
    			initialSlide: modalnumber,//设置默认页面
    			pagination: {
    				el: '.swiper-pagination',
    				clickable: true,
    			},
    			navigation: {
    				nextEl: '.swiper-button-next',
    				prevEl: '.swiper-button-prev'
    			}
    		};
    		return (
    			<div className="timeContainer">
    				<Modal isOpen={this.state.modalIsOpen} onRequestClose={this.closeModal} className="modalstyle">
    					<Swiper {...params}>
    						<div className="swipertotal">
    							<img src={img2} alt="" className="bigImg"></img>
    							<div className="inner">
    								<p>foot:left</p>
    							</div>
    							<button onClick={this.close} className="closebutton">
    								<Icon name="close"></Icon>
    							</button>
    						</div>
    						<div className="swipertotal">
    							<img src={img3} alt="" className="bigImg"></img>
    							<div className="inner">
    								<p>foot:right</p>
    							</div>
    							<button onClick={this.close} className="closebutton">
    								<Icon name="close"></Icon>
    							</button>
    						</div>
    					</Swiper>
    				</Modal>
    				<p className="timep">2019-1-16</p>
    				<div className="totalbox">
    					<div className="imgbox">
    						<img src={img2} alt={'no img'} className="imgstyle" onClick={() => this.Open('left')} />
    						<p>foot:left</p>
    					</div>
    					<div className="imgbox">
    						<img src={img3} alt={'no img'} className="imgstyle" onClick={() => this.Open('right')} />
    						<p>foot:right</p>
    					</div>
    					<div className="clearboth"></div>
    				</div>
    			</div>
    		);
    	}
    }
    export default App

App.css

.swiper-container {
      width: 100%;
      height: auto;
    }
    .swiper-slide {
      width: auto;
      overflow: hidden;
      text-align: center;
      font-size: 18px;
      background: #fff;
    }
    .clearboth{clear: both;}
    .imgbox{float: left;overflow: hidden;}
    .imgstyle{width: 96%;}
    .timep{text-align: left;}
    .closebutton{
      appearance: none;
      border: none;
      background: #FFD800;
      border-radius: 4px;
      text-transform: uppercase;
      box-sizing: border-box;
      padding: 4px 8px;
      font-weight: 400;
      font-size: 13px;
      cursor: pointer;
      position: absolute;
      right: 0;
      top: 0;
    }
    .closebutton:hover {
      color: #FFFFFF;
      background: #222222;
    }
    .swipertotal{position: relative;}
    .bigImg{width: 40%;height: auto;}

Swiper.css

本人已经在另外一篇博客粘贴了Swiper.css的代码：[https://blog.csdn.net/qq\_37815596/article/details/86293569][https_blog.csdn.net_qq_37815596_article_details_86293569]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70]: /images/20220327/67c90af989714a4690de247fe3a87512.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190116105219739.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 2]: /images/20220327/2d3f0cd1ed044949ae21736e81354920.png
[https_blog.csdn.net_qq_37815596_article_details_86293569]: https://blog.csdn.net/qq_37815596/article/details/86293569