小技巧:现在有两个按钮,点击哪个按钮哪个按钮背景变深,另一个按钮背景变淡,同时不同的按钮对应不同的背景(两个按钮可以自动轮播;10s一次);
idea+react+antDesign
首先:
state = {
buttonActive: 1 //按钮1:1;按钮2:2;
}
render:
<div className={classnames(CSS.bgImg, this.state.buttonActive === 2 ? CSS.bgImg2 : null)}>
<div className={CSS.bottomButton}>
<Button className={classnames(CSS.button, CSS.left, this.state.buttonActive === 1 ? CSS.active : null)}
onClick={this.onClose}>
按钮1
</Button>
<Button className={classnames(CSS.button, CSS.right, this.state.buttonActive === 2 ? CSS.active : null)}
onClick={this.showDrawer}>
按钮2
</Button>
</div>
</div>
!注意:用classnames需要引用哦~
import classnames from 'classnames';
用classnames可以引用多个样式,其中通过三元运算符来判断选择的是什么按钮,然后改变背景
方法:
autoChangeInterval = null; //自动切换定时器
autoChange = () => { //自动轮播函数
clearInterval(this.autoChangeInterval);
this.autoChangeInterval = setInterval(() => {
this.setState({
buttonActive: this.state.buttonActive === 1 ? 2 : 1
});
}, 10000)
};
showDrawer = () => {
this.setState({
buttonActive: 2
}, this.autoChange);
};
onClose = () => {
this.setState({
buttonActive: 1
}, this.autoChange);
};
最后css:
.bgImg {
width: 1920px;
height: 1080px;
background-image: url("../image/bgsmall.png");
transition-duration: 500ms;
&.bgImg2 {
background-image: url("../image/tabBg.png");
}
}
.bottomButton {
.button {
position: absolute;
background: url("../image/button1.png");
border: none;
height: 36px;
width: 150px;
top: 970px;
padding-left: 18px;
font-size: 22px;
color: #ffffff;
&.left {
left: 771px;
}
&.right {
left: 975px;
}
&.active {
background: url("../image/button2.png");
}
}
}
以上只是核心片段,适当改变即可应用哦~