jQuery根据屏幕运动碰撞

应是天仙狂醉。

于 2020-08-28 09:53:52 发布

阅读量203

点赞数 1

文章标签： jquery

本文链接：https://blog.csdn.net/xiankuangzui/article/details/108273801

版权

jQuery根据屏幕运动碰撞

工作中需要用到在网页上运动的方块，记录下方便以后使用

html部分和css部分很简单

<div class="join" id="join">
</div>

.join{
    width:280px;
    height:140px;
    position: fixed;
    z-index:8;
    cursor: pointer;
}

js部分

// An highlighted block
function move(){
	//定义初始速度
    let speedX = 2;
    let speedY = 2;
    setInterval(() => {
        let x = $("#join").position().left + speedX; //距离父级元素左边距
        let y = $("#join").position().top + speedY; //距离父级元素上边距
        let boxW = $(window).width() //可视区域宽度
        let boxH = $(window).height() //可视区域高度
		//发生碰撞时变向
        if(x >= boxW - $("#join").width() || x <= 0){
            speedX = speedX * -1
        }
        if(y >= boxH - $("#join").height() || y <=0){
            speedY = speedY * -1
        }
        //改变位置
        $("#join").css('left', x + 'px') 
        $("#join").css('top', y + 'px') 
    }, 5);
}