用js實(shí)現(xiàn)小球的自由移動(dòng)代碼
正在學(xué)習(xí)javascript 的朋友可以把它當(dāng)作小練習(xí)動(dòng)手做一做。加強(qiáng)自己的動(dòng)手編碼能力。
參考代碼:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>ggggg</title>
<link rel="stylesheet" type="text/css" href="">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<!--js代碼可以放置在任意位置,按照先后順序依次執(zhí)行 一般放在head標(biāo)簽之間-->
<script type="text/javascript">
//定義全局變量
//小球坐標(biāo)
ballX=0;
ballY=0;
//小球在x,y軸移動(dòng)的方向
directX=1;
directY=1;
//小球移動(dòng)
function ballMove(){
//小球移動(dòng)
ballX+=2*directX;
ballY+=2*directY;
//同時(shí)修改小球的top 和width
div2.style.top=ballY+'px';
div2.style.left=ballX+'px';
//window.alert(div1.offsetWidth);//offsetwidth在JS中是獲取元素的寬,對(duì)應(yīng)的還有offsetHeight
//判斷轉(zhuǎn)向
//learInterval(i);
if(ballX+div2.offsetWidth>=div1.offsetWidth ||ballX<=0){
directX=-directX;
}
if(ballY+div2.offsetHeight>=div1.offsetHeight || ballY<=0){
directY=-directY;
}
}
//定時(shí)器
var i=setInterval("ballMove()",10);
</script>
</head>
<body>
<div id="div1" style="width:400px;height:300px;border:1px solid silver;POSITION: absolute; TOP: 100px">
<div id="div2" style="position:absolute;left:0px;top:0px;"><img src="ball.png"></div>
</div>
</body>
</html>
圖:
- JavaScript+canvas實(shí)現(xiàn)框內(nèi)跳動(dòng)小球
- JavaScript結(jié)合Canvas繪畫畫運(yùn)動(dòng)小球
- JavaScript canvas實(shí)現(xiàn)跟隨鼠標(biāo)移動(dòng)小球
- 原生js實(shí)現(xiàn)移動(dòng)小球(碰撞檢測(cè))
- js實(shí)現(xiàn)小球在頁(yè)面規(guī)定的區(qū)域運(yùn)動(dòng)
- js實(shí)現(xiàn)跟隨鼠標(biāo)移動(dòng)的小球
- JavaScript實(shí)現(xiàn)小球沿正弦曲線運(yùn)動(dòng)
- p5.js入門教程之小球動(dòng)畫示例代碼
- 原生js實(shí)現(xiàn)彈跳小球
- 原生js實(shí)現(xiàn)彈動(dòng)小球效果
相關(guān)文章
使用AJAX實(shí)現(xiàn)Web頁(yè)面進(jìn)度條的實(shí)例分享
這篇文章主要介紹了使用AJAX實(shí)現(xiàn)Web頁(yè)面進(jìn)度條的實(shí)例分享,利用AJAX的異步來(lái)顯示服務(wù)器端的處理進(jìn)度是當(dāng)下比較流行的做法,需要的朋友可以參考下2016-05-05用nodejs實(shí)現(xiàn)PHP的print_r函數(shù)代碼
這篇文章主要介紹了用nodejs實(shí)現(xiàn)PHP的print_r函數(shù)代碼,需要的朋友可以參考下2014-03-03JS實(shí)現(xiàn)的貪吃蛇游戲完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)的貪吃蛇游戲,結(jié)合完整實(shí)例形式分析了javascript實(shí)現(xiàn)貪吃蛇游戲的具體步驟、原理與相關(guān)操作技巧,需要的朋友可以參考下2019-01-01javascript獲取文檔坐標(biāo)和視口坐標(biāo)
制作網(wǎng)頁(yè)的過(guò)程中,你有時(shí)候需要知道某個(gè)元素在網(wǎng)頁(yè)上的確切位置。下面的教程總結(jié)了Javascript在網(wǎng)頁(yè)定位方面的相關(guān)知識(shí)。有需要的小伙伴可以參考下。2015-05-05JavaScript實(shí)現(xiàn)點(diǎn)擊單元格改變背景色的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)點(diǎn)擊單元格改變背景色的方法,涉及JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素屬性的相關(guān)技巧,需要的朋友可以參考下2016-02-02window.showModalDialog()返回值的學(xué)習(xí)心得總結(jié)
本篇文章主要介紹了window.showModalDialog()返回值的學(xué)習(xí)心得。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-01-01