React+Css3图片预览（缩放、旋转、切换）

最新推荐文章于 2025-06-27 09:09:44 发布

原创

最新推荐文章于 2025-06-27 09:09:44 发布 · 8.4k 阅读

CC 4.0 BY-SA版权

自己写的一个react缩放组件，主要通过CSS3的动画来实现的，有对应的介绍和使用方法。
这是之前发布的一个JQ版的缩放旋转切换demo，原理差不多。
JQ版本：https://blog.youkuaiyun.com/weixin_43648947/article/details/88132986

新增github:demo地址：https://github.com/babybrotherzb/react-show-images

先看效果
我这里的缩小和放大比例都是一倍，旋转角度90°，可以自己调整，跟JQ版的效果是一样的。
在这里插入图片描述

一、新建的文件夹 newimg.jsx
这个里面是处理图片的子组件

import React, {
   
   Component} from 'react';
import './style.scss'

export default class ShowImg extends Component {
   
   
    constructor (props){
   
   
        super(props)
        this.state = {
   
     f:this.props.firstIndex,
                        R:0 ,
                        S:1 ,
                        i:0 ,
                        SS:1,
                        data:this.props.data,
                        showimgs:this.props.showimgs
                    }
    }
    componentDidMount(){
   
   

    }
    componentWillReceiveProps(props){
   
   
        this.setState({
   
   f:props.firstIndex})
    }
    //向左预览
    leftshow = () =>{
   
   
        if(this.state.f==0){
   
   
            this.setState({
   
   f:4,R:0,S:1,i:0,SS:1})
        }else{
   
   
            this.setState({
   
   f:this.state.f-1,R:0,S:1,i:0,SS:1})
        }
        this.refs.imgstyle.setAttribute('src',this.props.data[this.state.f])
    }

    //向右预览
    rightshow = () =>{
   
   
        if(this.state.f==4){
   
   
            this.setState({
   
   f:0,R:0,S:1,i:0,SS:1})
        }else{
   
   
            this.setState({
   
   f:this.state.f+1,R:0,S:1,i:0,SS:1})
        }
        this.refs.imgstyle.setAttribute('src',this.props.data[this.state.f])
    }

    //顺时针旋转
    rotateright = () =>{
   
   
        this.setState({
   
   R:this.state.R+90})
        this.refs.imgstyle.style.transform ="translate(-50% ,-50%) rotate("+this.state.R+"deg) scale("+this.