本文實例講述了JS實現簡單的浮動碰撞效果。分享給大家供大家參考,具體如下:
<html><head><meta charset="UTF-8"><title>m.survivalescaperooms.com JS碰撞效果</title><script language="javascript"><!-- directX=1; //X軸方向 directY=1; //Y軸方向 sunX=0; sunY=0; function sunMov(){ //定兩個方向 sunX+=directX*2; sunY+=directY*2; //修改div的left top sundiv.style.top=sunY+"px"; sundiv.style.left=sunX+"px"; //判斷什么時候,轉變方向 //x方向(offestWidth可以返回,當前這個對象的實際寬度) if(sunX+sundiv.offsetWidth>=document.body.clientWidth || sunX<=0){ directX=-directX; } if(sunY+sundiv.offsetHeight>=document.body.clientHeight || sunY<=0){ directY=-directY; } } setInterval("sunMov()",10);//--></script></head><body style="/*background-image:URL('a.jpg');background-size:cover; background-repeat:no-repeat*/"><div id="sundiv" style="position:absolute"><img src="http://m.survivalescaperooms.com/images/logo.gif"/></div></body></html>希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答