欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

用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)手編碼能力。

參考代碼:

復(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標(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實(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ù)代碼

    這篇文章主要介紹了用nodejs實(shí)現(xiàn)PHP的print_r函數(shù)代碼,需要的朋友可以參考下
    2014-03-03
  • JavaScript?中的行繼續(xù)符操作

    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)的貪吃蛇游戲完整實(shí)例

    這篇文章主要介紹了JS實(shí)現(xiàn)的貪吃蛇游戲,結(jié)合完整實(shí)例形式分析了javascript實(shí)現(xiàn)貪吃蛇游戲的具體步驟、原理與相關(guān)操作技巧,需要的朋友可以參考下
    2019-01-01
  • javascript獲取文檔坐標(biāo)和視口坐標(biāo)

    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實(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í)心得總結(jié)

    本篇文章主要介紹了window.showModalDialog()返回值的學(xué)習(xí)心得。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助
    2014-01-01
  • 20行js代碼實(shí)現(xiàn)的貪吃蛇小游戲

    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原生手寫輪播圖效果

    JS原生手寫輪播圖效果

    這篇文章主要為大家詳細(xì)介紹了JS原生手寫輪播圖效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-08-08
  • js中數(shù)組排序sort方法的原理分析

    js中數(shù)組排序sort方法的原理分析

    這篇文章主要介紹了js中數(shù)組排序sort方法的原理,以實(shí)例形式分析了sort排序方法的運(yùn)行機(jī)制,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2014-11-11

最新評(píng)論