Question

我有一个要用作背景的水平图像。我想根据传递给函数的参数来更改图像的位置。我的图片：

到目前为止，我的代码：

import React, { Component } from 'react'

import Background from '../images/background_image.jpg';

class MoveImage extends Component{

    constructor(props) {
    super(props);
    this.state = {
      counter: 1
     }
  }

    const bgSlide = {
        backgroundImage: `url(${Background})`
    };

    moveBGImage=(id)=>{
        //slide the image depending on the id
        //so if id=2, the image should slide from screen1 to screen2
    }

    render(){
        return(
            <div style = { bgSlide } >

                <button
                    onClick = this.moveBGImage(this.state.counter+1)
                >
                    Click Me

                </button>

            </div>

            )
    }


}


export default MoveImage;

因此，如果计数器为2，我想显示图像的screen2部分。屏幕1应该向左滑动，屏幕2应该从右滑动。可以在React中完成吗？

Answer 1

可以使用CSS background-position：

const App = () => {
  const [screen, setScreen] = React.useState(1)
  const toggleScreen = () => setScreen(s => s > 3 ? 1 : s + 1)
  return (
    <div className={`screen nr${screen}`} onClick={toggleScreen} />
  )
}

ReactDOM.render(<App /> , document.getElementById('root'))

.screen {
  background: url('https://i.stack.imgur.com/72bFV.png') no-repeat 0 0;
  background-size: cover;
  width: 120px;
  height: 100px;
  transition: 300ms;
}
.screen.nr2 {
  background-position: 33.33% 0;
}
.screen.nr3 {
  background-position: 66.67% 0;
}
.screen.nr4 {
  background-position: 100% 0;
}

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>

注意：我使用了问题中的图像，该图像没有精确的1/4部分，因此红线未完全对齐。

幻灯片背景图片ReactJS |的CSS

1 个答案: