快捷導(dǎo)航

用js實(shí)現(xiàn)小球的自由移動(dòng)代碼

更新時(shí)間：2013年04月22日 14:19:27 作者：

本篇文章小編為大家介紹，用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>

圖:

您可能感興趣的文章:

相關(guān)文章

js中的觸發(fā)事件對(duì)象event.srcElement與event.target詳解
這篇文章主要給大家介紹了js中的觸發(fā)事件對(duì)象event.srcElement與event.target的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。
2017-03-03
js 自帶的sort() 方法全面了解
下面小編就為大家?guī)?lái)一篇js 自帶的sort() 方法全面了解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-08-08
JavaScript實(shí)現(xiàn)設(shè)置默認(rèn)日期范圍為最近40天的方法分析
這篇文章主要介紹了JavaScript實(shí)現(xiàn)設(shè)置默認(rèn)日期范圍為最近40天的方法,結(jié)合實(shí)例形式分析了javascript結(jié)合HTML5 date元素進(jìn)行時(shí)間運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下
2017-07-07
整理CocosCreator常用知識(shí)點(diǎn)
這篇文章主要介紹了整理CocosCreator常用知識(shí)點(diǎn)，這些知識(shí)點(diǎn)，平時(shí)幾乎都能用到，希望同學(xué)們看完后，可以自己去試一下，加深印象
2021-04-04
JavaScript設(shè)計(jì)模式--橋梁模式引入操作實(shí)例分析
這篇文章主要介紹了JavaScript設(shè)計(jì)模式--橋梁模式,結(jié)合實(shí)例形式分析了JavaScript設(shè)計(jì)模式中橋梁模式應(yīng)用操作技巧與注意事項(xiàng),需要的朋友可以參考下
2020-05-05
網(wǎng)頁(yè)加載時(shí)頁(yè)面顯示進(jìn)度條加載完成之后顯示網(wǎng)頁(yè)內(nèi)容
網(wǎng)頁(yè)加載時(shí)頁(yè)面顯示進(jìn)度條（加載完成時(shí)顯示網(wǎng)頁(yè)內(nèi)容）,這種效果在瀏覽網(wǎng)頁(yè)很常見(jiàn)，本文也介紹一種實(shí)現(xiàn)方法，需要了解的朋友可以參考下
2012-12-12
JavaScript 數(shù)組循環(huán)引起的思考
Google array.js 程序中建議改進(jìn)的代碼。思考為什么i-- 到了 i為0時(shí)while循環(huán)結(jié)束了？
2010-01-01
JavaScript基礎(chǔ)之AJAX簡(jiǎn)單的小demo
這篇文章主要介紹了JavaScript基礎(chǔ)之AJAX簡(jiǎn)單的小demo ，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下
2017-01-01
javascript實(shí)現(xiàn)編寫網(wǎng)頁(yè)版計(jì)算器
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)編寫網(wǎng)頁(yè)版計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08
JavaScript 聲明私有變量的兩種方式
這篇文章主要介紹了JavaScript 聲明私有變量的兩種方式，幫助大家更好的理解和學(xué)習(xí)使用JavaScript，感興趣的朋友可以了解下
2021-02-02