react 实现点击放大效果

最新推荐文章于 2024-08-09 07:23:58 发布

热爱前端的小君同学

最新推荐文章于 2024-08-09 07:23:58 发布

阅读量8k

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/qq_37815596/article/details/86481849

版权

前端专栏收录该内容

105 篇文章 4 订阅

订阅专栏

(一)简单的点击放大demo1

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;

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

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