<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=utf-"/>
</head>
<body style="background:pink;">
<div id="ball" style="position:absolute;" onmouseover="stop()" onmouseout="jixu()">
<img src="http://img.taobaocdn.com/imgextra/i//TBfGvsdpXXXXbDXXXXXXXXXXXX-.gif"/>
</div>
<script type="text/javascript">
//定義局部變量
var directX=;//定義x軸方向
var directY=;//定義y軸方向
var ballX=;//定義x軸坐標(biāo)
var ballY=;//定義y軸坐標(biāo)
var speed=;//定義一個(gè)速度
var myball=document.getElementById("ball");
function ballMove(){
ballX=ballX+directX*speed;
ballY=ballY+directY*speed;
//改變div的left,top的值
myball.style.left=ballX+"px";
myball.style.top=ballY+"px";
//判斷x軸什么時(shí)候轉(zhuǎn)向
if(ballX+myball.offsetWidth>=document.documentElement.clientWidth||ballX<=){
//clientWidth瀏覽器不帶滾動(dòng)條的寬度;clientHeight瀏覽器不帶工具欄菜單欄以及滾動(dòng)條等的高度
directX=-directX;//offsetWidth可以返回一個(gè)對(duì)象的實(shí)際寬度(不帶單位)offsetHeight類同
}
//判斷y軸何時(shí)轉(zhuǎn)向
if(ballY+myball.offsetHeight>=document.documentElement.clientHeight||ballY<=){
directY=-directY;
}
}
var stopmove=setInterval("ballMove()",);
function stop(){
clearInterval(stopmove);
}
function jixu(){
var stopmove=setInterval("ballMove()",); ;
}
</script>
</body>
</html>

以上代碼是比較簡(jiǎn)單，希望對(duì)大家使用Js實(shí)現(xiàn)簡(jiǎn)單的小球運(yùn)動(dòng)效果有所幫助！

您可能感興趣的文章:

相關(guān)文章

js與vue如何實(shí)現(xiàn)自動(dòng)全屏顯示效果
這篇文章主要給大家介紹了關(guān)于js與vue如何實(shí)現(xiàn)自動(dòng)全屏顯示效果的相關(guān)資料,在vue項(xiàng)目中做一個(gè)可以控制頁(yè)面全屏展示的效果,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-12-12
JavaScript實(shí)現(xiàn)下拉菜單的顯示和隱藏
這篇文章主要介紹了JavaScript實(shí)現(xiàn)下拉菜單的顯示和隱藏的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-01-01
微信小程序使用template標(biāo)簽實(shí)現(xiàn)五星評(píng)分功能
這篇文章主要為大家詳細(xì)介紹了微信小程序使用template標(biāo)簽實(shí)現(xiàn)五星評(píng)分功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-11-11
JavaScript實(shí)現(xiàn)伸縮二級(jí)菜單
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)伸縮二級(jí)菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10
js 實(shí)現(xiàn)打印網(wǎng)頁(yè)中定義的部分內(nèi)容的代碼
有時(shí)候頁(yè)面需要打印功能，如果再做一個(gè)頁(yè)面不利于優(yōu)化，兩個(gè)頁(yè)面內(nèi)容一樣了，所以可以用js實(shí)現(xiàn)內(nèi)容的打印不需要的就不打印。
2010-04-04
詳解處理bootstrap4不支持遠(yuǎn)程靜態(tài)框問(wèn)題
這篇文章主要介紹了詳解處理bootstrap4不支持遠(yuǎn)程靜態(tài)框問(wèn)題，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-07-07
原生微信小程序/uniapp使用空格占位符無(wú)效的解決辦法
最近需要在字體中間加空白占位符,在嘗試使用之后,還是不能使用,下面這篇文章主要給大家介紹了關(guān)于原生微信小程序/uniapp使用空格占位符無(wú)效的解決辦法,需要的朋友可以參考下
2023-02-02
js中cookie的使用詳細(xì)分析
JavaScript中的另一個(gè)機(jī)制：cookie，則可以達(dá)到真正全局變量的要求。 cookie是瀏覽器提供的一種機(jī)制，它將document 對(duì)象的cookie屬性提供給JavaScript?？梢杂蒍avaScript對(duì)其進(jìn)行控制，而并不是JavaScript本身的性質(zhì)。
2008-05-05
使用pcs api往免費(fèi)的百度網(wǎng)盤上傳下載文件的方法
百度個(gè)人云盤空間大，完全免費(fèi)，而且提供了pcs api供調(diào)用操作文件，在平時(shí)的項(xiàng)目里往里面保存一些文件是很實(shí)用的。通過(guò)本文給大家介紹使用pcs api往免費(fèi)的百度網(wǎng)盤上傳下載文件的方法，感興趣的朋友一起學(xué)習(xí)吧
2016-03-03
JavaScript獲取數(shù)組最小值和最大值的方法
這篇文章主要介紹了JavaScript獲取數(shù)組最小值和最大值的方法,涉及javascript中min與max方法的使用技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
2015-06-06