2022-07-14React框架实现点击图标，图片进行4个位置的切换

需求：点击图片切换按钮，实现图片位置的切换（上下左右的切换）

思路：1.创建点击事件

<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：对坐标判断实现图片切换位置

        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'

    }

    }