需求:點擊圖片切換按鈕,實現(xiàn)圖片位置的切換(上下左右的切換)
思路:1.創(chuàng)建點擊事件
<Tooltip placement="top" title="熱成像鏡頭切換">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <Button
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? type="primary"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? icon={<EnvironmentOutlined />
? ? ? ? ? ? ? ? ? onClick={this.videoPositionChange}? />
思路2:獲取圖片并建立坐標
?videoPositionChange=()=>{
? ? ? ? var vpc = document.getElementById('video2')//獲取圖片
? ? ? ? var vsr = vpc.style.right
? ? ? ? var vsb = vpc.style.bottom
思路3:對坐標判斷實現(xiàn)圖片切換位置
? ? ? ? if (vsr=='0px'&&vsb=='0px'){
? ? ? ? vpc.style.right='750px'
? ? } ? if (vsr=='750px'&&vsb=='0px'){
? ? ? ? vpc.style.bottom='351.75px'
? ? } ? if (vsr=='750px'&&vsb=='351.75px'){
? ? ? ? vpc.style.right='0px'
? ? } ? if (vsr=='0px'&&vsb=='351.75px'){
? ? ? ? vpc.style.bottom='0px'
? ? }
? ? }