快捷導(dǎo)航

用js實現(xiàn)小球的自由移動代碼

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

本篇文章小編為大家介紹，用js實現(xiàn)小球的自由移動代碼。需要的朋友參考下

正在學(xué)習(xí)javascript 的朋友可以把它當作小練習(xí)動手做一做。加強自己的動手編碼能力。

參考代碼：

<!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)文章

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