用js實現(xiàn)小球的自由移動代碼
更新時間：2013年04月22日 14:19:27 作者：
本篇文章小編為大家介紹，用js實現(xiàn)小球的自由移動代碼。需要的朋友參考下
正在學習javascript 的朋友可以把它當作小練習動手做一做。加強自己的動手編碼能力。
參考代碼：
復(fù)制代碼 代碼如下:
<!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標簽之間-->
<script type="text/javascript">
//定義全局變量
//小球坐標
ballX=0;
ballY=0;
//小球在x,y軸移動的方向
directX=1;
directY=1;
//小球移動
function ballMove(){
//小球移動
ballX+=2*directX;
ballY+=2*directY;
//同時修改小球的top 和width
div2.style.top=ballY+'px';
div2.style.left=ballX+'px';
//window.alert(div1.offsetWidth);//offsetwidth在JS中是獲取元素的寬,對應(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;
}
}
//定時器
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>
圖:
相關(guān)文章
這篇文章主要介紹了使用AJAX實現(xiàn)Web頁面進度條的實例分享,利用AJAX的異步來顯示服務(wù)器端的處理進度是當下比較流行的做法,需要的朋友可以參考下2016-05-05
用nodejs實現(xiàn)PHP的print_r函數(shù)代碼
這篇文章主要介紹了用nodejs實現(xiàn)PHP的print_r函數(shù)代碼,需要的朋友可以參考下2014-03-03
JavaScript?中的字符串操作可能很復(fù)雜，?盡管字符串操作易于掌握，但實施起來卻具有挑戰(zhàn)性，其中一個相關(guān)領(lǐng)域是添加新行，這篇文章主要介紹了JavaScript中的行繼續(xù)符操作,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了JS實現(xiàn)的貪吃蛇游戲,結(jié)合完整實例形式分析了javascript實現(xiàn)貪吃蛇游戲的具體步驟、原理與相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
制作網(wǎng)頁的過程中，你有時候需要知道某個元素在網(wǎng)頁上的確切位置。下面的教程總結(jié)了Javascript在網(wǎng)頁定位方面的相關(guān)知識。有需要的小伙伴可以參考下。2015-05-05
JavaScript實現(xiàn)點擊單元格改變背景色的方法
這篇文章主要介紹了JavaScript實現(xiàn)點擊單元格改變背景色的方法,涉及JavaScript響應(yīng)鼠標事件動態(tài)操作頁面元素屬性的相關(guān)技巧,需要的朋友可以參考下2016-02-02
window.showModalDialog()返回值的學習心得總結(jié)
本篇文章主要介紹了window.showModalDialog()返回值的學習心得。需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
曾經(jīng)諾基亞的貪吃蛇風靡一時，在游戲匱乏的年代，用Java實現(xiàn)太難，現(xiàn)在網(wǎng)頁制作20行代碼就做成一個簡單的demo了，下面這篇文章主要給大家介紹了利用20行js代碼實現(xiàn)的貪吃蛇小游戲，需要的朋友可以參考借鑒，下面來一起看看吧。2017-06-06
這篇文章主要為大家詳細介紹了JS原生手寫輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要介紹了js中數(shù)組排序sort方法的原理,以實例形式分析了sort排序方法的運行機制,具有一定的參考借鑒價值,需要的朋友可以參考下2014-11-11