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

js實(shí)現(xiàn)小球在頁面規(guī)定的區(qū)域運(yùn)動(dòng)

 更新時(shí)間：2020年06月16日 14:13:23   作者：Lv_SFeng  
這篇文章主要為大家詳細(xì)介紹了js控制小球在規(guī)定范圍運(yùn)動(dòng)，碰到邊界就改變運(yùn)動(dòng)方向，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js控制小球在規(guī)定范圍運(yùn)動(dòng)的具體代碼，供大家參考，具體內(nèi)容如下

小球在頁面規(guī)定的區(qū)域運(yùn)動(dòng)，碰到邊界就改變運(yùn)動(dòng)方向。

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>小球運(yùn)動(dòng)</title>
 <style type="text/css">
 #box {
 width: 600px;
 height: 300px;
 border: 1px solid red;
 position: relative;
 }
 #ball {
 width: 50px;
 height: 50px;
 border-radius: 25px;
 background-color: yellow;
 position: absolute;
 top: 0;
 left: 0;
 }
 button {
 position: relative;
 }
 </style>
 </head>
 <body>
 <div id="box">
 <div id="ball">
 
 </div>
 </div>
 <button id="stop" onclick="fly()">開始</button>
 <button id="stop" onclick="stop()">停止</button>
 <script type="text/javascript">
 var ball = document.getElementById("ball");
 //console.log(ball.offsetLeft);
 var sport;
 function fly() {
 var speedx = 1;
 var speedy = 1;
 
 sport = setInterval(function () {
  ball.style.left = ball.offsetLeft + speedx + 'px';
  ball.style.top = ball.offsetTop + speedy + 'px';
  
  if (ball.offsetTop >= 300 -50 || ball.offsetTop <= 0) {
  speedy *= -1; 
  }
  if (ball.offsetLeft >= 600 -50 || ball.offsetLeft <= 0) {
  speedx *= -1; 
  }
 }, 10)
 }
 function stop() {
 clearInterval(sport); //停止小球的運(yùn)動(dòng)
 }
 </script>
 </body>
</html>

效果圖：

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

相關(guān)文章

  • 判斷某個(gè)字符在一個(gè)字符串中是否存在的js代碼

    判斷某個(gè)字符在一個(gè)字符串中是否存在的js代碼

    這篇文章主要介紹了判斷某個(gè)字符在一個(gè)字符串中是否存在的方法,需要的朋友可以參考下
    2014-02-02
  • js代碼驗(yàn)證手機(jī)號碼和電話號碼是否合法

    js代碼驗(yàn)證手機(jī)號碼和電話號碼是否合法

    這篇文章主要介紹了js代碼驗(yàn)證手機(jī)號碼和電話號碼是否合法，手機(jī)號碼和電話號碼在某些網(wǎng)站都是必填項(xiàng)，為了提高用戶體驗(yàn)度，一般要進(jìn)行合法性校驗(yàn)的,需要的朋友可以參考下
    2015-07-07
  • js模仿java的Map集合詳解

    js模仿java的Map集合詳解

    這篇文章主要介紹了js模仿java的Map集合的相關(guān)資料，Java中某些最常用的集合類是List和Map，感興趣的小伙伴們可以了解一下
    2016-01-01
  • js 跳出頁面的frameset框架示例介紹

    js 跳出頁面的frameset框架示例介紹

    很多網(wǎng)頁都是框架結(jié)構(gòu)的，在很多的情況下會(huì)通過按鈕點(diǎn)擊事件或鏈接，跳出框架轉(zhuǎn)到其它界面。下面為大家介紹下js跳出頁面的frameset框架
    2013-12-12
  • JavaScript模擬重力狀態(tài)下拋物運(yùn)動(dòng)的方法

    JavaScript模擬重力狀態(tài)下拋物運(yùn)動(dòng)的方法

    這篇文章主要介紹了JavaScript模擬重力狀態(tài)下拋物運(yùn)動(dòng)的方法,實(shí)例分析了javascript操作dom元素模擬運(yùn)動(dòng)的方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-03-03
  • JavaScript中內(nèi)存泄漏的介紹與教程（推薦）

    JavaScript中內(nèi)存泄漏的介紹與教程（推薦）

    內(nèi)存泄露是指一塊被分配的內(nèi)存既不能使用，又不能回收，直到瀏覽器進(jìn)程結(jié)束。下面這篇文章主要給的大家介紹了關(guān)于JavaScript中內(nèi)存泄漏的相關(guān)資料，文中介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。
    2017-06-06
  • 推薦一個(gè)自己用的封裝好的javascript插件

    推薦一個(gè)自己用的封裝好的javascript插件

    本文推薦給大家一款自用的封裝好的javascript插件，常用的一些檢測全部都涵蓋了，非常實(shí)用，推薦給小伙伴們。
    2015-01-01
  • es6系列教程_ Map詳解以及常用api介紹

    es6系列教程_ Map詳解以及常用api介紹

    下面小編就為大家?guī)硪黄猠s6系列教程_ Map詳解以及常用api介紹。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-09-09
  • JS+CSS實(shí)現(xiàn)的經(jīng)典圓角下拉菜單效果代碼

    JS+CSS實(shí)現(xiàn)的經(jīng)典圓角下拉菜單效果代碼

    這篇文章主要介紹了JS+CSS實(shí)現(xiàn)的經(jīng)典圓角下拉菜單效果代碼,可實(shí)現(xiàn)非常經(jīng)典的圓角下拉菜單效果,涉及JavaScript動(dòng)態(tài)操作頁面元素css樣式的相關(guān)技巧,需要的朋友可以參考下
    2015-10-10
  • JavaScript實(shí)現(xiàn)短暫提示框功能

    JavaScript實(shí)現(xiàn)短暫提示框功能

    這篇文章主要介紹了JavaScript實(shí)現(xiàn)短暫提示框功能，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下
    2018-04-04

最新評論