js實現(xiàn)小球在頁面規(guī)定的區(qū)域運動
更新時間：2020年06月16日 14:13:23 作者：Lv_SFeng
這篇文章主要為大家詳細(xì)介紹了js控制小球在規(guī)定范圍運動，碰到邊界就改變運動方向，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js控制小球在規(guī)定范圍運動的具體代碼，供大家參考，具體內(nèi)容如下
小球在頁面規(guī)定的區(qū)域運動，碰到邊界就改變運動方向。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小球運動</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); //停止小球的運動
}
</script>
</body>
</html>
效果圖：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了判斷某個字符在一個字符串中是否存在的方法,需要的朋友可以參考下2014-02-02
這篇文章主要介紹了js代碼驗證手機(jī)號碼和電話號碼是否合法，手機(jī)號碼和電話號碼在某些網(wǎng)站都是必填項，為了提高用戶體驗度，一般要進(jìn)行合法性校驗的,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了js模仿java的Map集合的相關(guān)資料，Java中某些最常用的集合類是List和Map，感興趣的小伙伴們可以了解一下2016-01-01
很多網(wǎng)頁都是框架結(jié)構(gòu)的，在很多的情況下會通過按鈕點擊事件或鏈接，跳出框架轉(zhuǎn)到其它界面。下面為大家介紹下js跳出頁面的frameset框架2013-12-12
這篇文章主要介紹了JavaScript模擬重力狀態(tài)下拋物運動的方法,實例分析了javascript操作dom元素模擬運動的方法,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
JavaScript中內(nèi)存泄漏的介紹與教程（推薦）
內(nèi)存泄露是指一塊被分配的內(nèi)存既不能使用，又不能回收，直到瀏覽器進(jìn)程結(jié)束。下面這篇文章主要給的大家介紹了關(guān)于JavaScript中內(nèi)存泄漏的相關(guān)資料，文中介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-06-06
本文推薦給大家一款自用的封裝好的javascript插件，常用的一些檢測全部都涵蓋了，非常實用，推薦給小伙伴們。2015-01-01
下面小編就為大家?guī)硪黄猠s6系列教程_ Map詳解以及常用api介紹。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
JS+CSS實現(xiàn)的經(jīng)典圓角下拉菜單效果代碼
這篇文章主要介紹了JS+CSS實現(xiàn)的經(jīng)典圓角下拉菜單效果代碼,可實現(xiàn)非常經(jīng)典的圓角下拉菜單效果,涉及JavaScript動態(tài)操作頁面元素css樣式的相關(guān)技巧,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了JavaScript實現(xiàn)短暫提示框功能，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-04-04