<!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>

圖:

您可能感興趣的文章:

相關(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-03
JavaScript?中的行繼續(xù)符操作
JavaScript?中的字符串操作可能很復(fù)雜，?盡管字符串操作易于掌握，但實(shí)施起來(lái)卻具有挑戰(zhàn)性，其中一個(gè)相關(guān)領(lǐng)域是添加新行，這篇文章主要介紹了JavaScript中的行繼續(xù)符操作,需要的朋友可以參考下
2023-06-06
JS實(shí)現(xiàn)的貪吃蛇游戲完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)的貪吃蛇游戲,結(jié)合完整實(shí)例形式分析了javascript實(shí)現(xiàn)貪吃蛇游戲的具體步驟、原理與相關(guān)操作技巧,需要的朋友可以參考下
2019-01-01
javascript獲取文檔坐標(biāo)和視口坐標(biāo)
制作網(wǎng)頁(yè)的過(guò)程中，你有時(shí)候需要知道某個(gè)元素在網(wǎng)頁(yè)上的確切位置。下面的教程總結(jié)了Javascript在網(wǎng)頁(yè)定位方面的相關(guān)知識(shí)。有需要的小伙伴可以參考下。
2015-05-05
JavaScript實(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-02
window.showModalDialog()返回值的學(xué)習(xí)心得總結(jié)
本篇文章主要介紹了window.showModalDialog()返回值的學(xué)習(xí)心得。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-01-01
20行js代碼實(shí)現(xiàn)的貪吃蛇小游戲
曾經(jīng)諾基亞的貪吃蛇風(fēng)靡一時(shí)，在游戲匱乏的年代，用Java實(shí)現(xiàn)太難，現(xiàn)在網(wǎng)頁(yè)制作20行代碼就做成一個(gè)簡(jiǎn)單的demo了，下面這篇文章主要給大家介紹了利用20行js代碼實(shí)現(xiàn)的貪吃蛇小游戲，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。
2017-06-06
JS原生手寫(xiě)輪播圖效果
這篇文章主要為大家詳細(xì)介紹了JS原生手寫(xiě)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-08-08
js中數(shù)組排序sort方法的原理分析
這篇文章主要介紹了js中數(shù)組排序sort方法的原理,以實(shí)例形式分析了sort排序方法的運(yùn)行機(jī)制,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2014-11-11