<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>碰撞小球</title>
 <style>
 #box{
  width: 1000px;
  height: 800px;
  position: relative;
  border:1px solid red;
  margin:50px auto 0;
 }
 #boll{
  width: 50px;
  height: 50px;
/*  border-radius: 25px;*/
  border:1px solid green;
  position: absolute;
  top: 66px;
  left: 88px;
 }
 </style>
</head>
<body>
 <div id="box">
  <div id="boll"></div>
 </div>
 <script>
  var box=document.getElementById('box');
  var boll=document.getElementById('boll');
  var x=88,y=66,timer1=null,movex=1,movey=1;
  console.log(box.clientWidth-boll.clientWidth);
  console.log(box.clientWidth-boll.offsetWidth);
   timer1=setInterval(function(){
    if (movex) {//判斷方向
     x++;
     if (x>=box.clientWidth-boll.clientWidth) {
      movex=0;
     }boll.style.left=x+'px';}
     else{
      x--;
      if (x<=0) {
       movex=1;
      }boll.style.left=x+'px';
     }
    if (movey) {
     y++;
     
     if (y>=box.clientHeight-boll.clientHeight) {
      movey=0;
     }boll.style.top=y+'px';
    }else{
      y--;
      if (y<=0) {
       movey=1;
      }boll.style.top=y+'px';
     }
   },1)
 </script>
</body>
</html>

其中movex和movey兩個(gè)變量是判斷運(yùn)動(dòng)的方向。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

javascript中Number的方法小結(jié)
本文介紹javascript中Number的使用方法，并對(duì)其進(jìn)行了匯總，希望對(duì)大家有所幫助
2016-11-11
canvas實(shí)現(xiàn)動(dòng)態(tài)小球重疊效果
在javascript運(yùn)動(dòng)系列中，詳細(xì)介紹了各種運(yùn)動(dòng)，其中就包括碰壁運(yùn)動(dòng)。但是，如果用canvas去實(shí)現(xiàn)，卻是另一種思路。本文將詳細(xì)介紹canvas動(dòng)態(tài)小球重疊效果。下面跟著小編一起來(lái)看下吧
2017-02-02
JavaScript使用ul中l(wèi)i標(biāo)簽實(shí)現(xiàn)刪除效果
這篇文章主要為大家詳細(xì)介紹了JavaScript使用ul中l(wèi)i標(biāo)簽實(shí)現(xiàn)刪除效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-04-04
理解Javascript_01_理解內(nèi)存分配原理分析
在正式開始之前，我想先說兩句，理解javascript系列博文是通過帶領(lǐng)大家分析javascript執(zhí)行時(shí)的內(nèi)存分配情況，來(lái)解釋javascript原理，具體會(huì)涵蓋javascript預(yù)加載，閉包原理，面象對(duì)象，執(zhí)行模型，對(duì)象模型...,文章的視角很特別，也非常深入，希望大家能接受這種形式，并提供寶貴意見。
2010-10-10
微信小程序封裝網(wǎng)絡(luò)請(qǐng)求和攔截器實(shí)戰(zhàn)步驟
這篇文章主要介紹了微信小程序封裝網(wǎng)絡(luò)請(qǐng)求和攔截器實(shí)戰(zhàn)步驟，這樣可以提高開發(fā)效率，減少代碼重復(fù)，同時(shí)也可以提高代碼的可維護(hù)性和可讀性
2023-03-03
javascript設(shè)計(jì)模式 – 觀察者模式原理與用法實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 觀察者模式,結(jié)合實(shí)例形式分析了javascript觀察者模式相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下
2020-04-04
別了 JavaScript中的isXX系列
我們很容易被漂亮的代碼吸引，也不知不覺的在自己的代碼庫(kù)中加入這些。卻沒有冷靜的想過它們的優(yōu)劣。這不，我就收集了一系列形如是否為……？的判斷的boolean函數(shù)
2012-08-08
javascript 密碼強(qiáng)度驗(yàn)證規(guī)則、打分、驗(yàn)證（給出前端代碼，后端代碼可根據(jù)強(qiáng)度規(guī)則翻譯）
密碼強(qiáng)度是一個(gè)很普遍的功能，比較簡(jiǎn)單，主要是怎么制定這個(gè)強(qiáng)度規(guī)則。
2010-05-05
javascript完整操作Table的增加行，刪除行的列子大全
非常漂亮的js操作table行代碼函數(shù)。比較方便
2008-10-10
瀏覽器緩存技術(shù)實(shí)現(xiàn)淺析
這篇文章主要為大家介紹了瀏覽器緩存技術(shù)實(shí)現(xiàn)淺析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05