Js實現(xiàn)簡單的小球運動特效
更新時間：2016年02月18日 11:52:22 投稿：mrr
這篇文章主要介紹了Js實現(xiàn)簡單的小球運動特效的相關(guān)資料,需要的朋友可以參考下
廢話不多說了，直接給大家貼js代碼了，具體代碼如下所示：
<!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=;//定義一個速度
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軸什么時候轉(zhuǎn)向
if(ballX+myball.offsetWidth>=document.documentElement.clientWidth||ballX<=){
//clientWidth瀏覽器不帶滾動條的寬度;clientHeight瀏覽器不帶工具欄菜單欄以及滾動條等的高度
directX=-directX;//offsetWidth可以返回一個對象的實際寬度(不帶單位)offsetHeight類同
}
//判斷y軸何時轉(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>
以上代碼是比較簡單，希望對大家使用Js實現(xiàn)簡單的小球運動效果有所幫助！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于js與vue如何實現(xiàn)自動全屏顯示效果的相關(guān)資料,在vue項目中做一個可以控制頁面全屏展示的效果,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
這篇文章主要介紹了JavaScript實現(xiàn)下拉菜單的顯示和隱藏的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-01-01
微信小程序使用template標(biāo)簽實現(xiàn)五星評分功能
這篇文章主要為大家詳細(xì)介紹了微信小程序使用template標(biāo)簽實現(xiàn)五星評分功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)伸縮二級菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
js 實現(xiàn)打印網(wǎng)頁中定義的部分內(nèi)容的代碼
有時候頁面需要打印功能，如果再做一個頁面不利于優(yōu)化，兩個頁面內(nèi)容一樣了，所以可以用js實現(xiàn)內(nèi)容的打印不需要的就不打印。2010-04-04
詳解處理bootstrap4不支持遠(yuǎn)程靜態(tài)框問題
這篇文章主要介紹了詳解處理bootstrap4不支持遠(yuǎn)程靜態(tài)框問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
最近需要在字體中間加空白占位符,在嘗試使用 之后,還是不能使用,下面這篇文章主要給大家介紹了關(guān)于原生微信小程序/uniapp使用空格占位符無效的解決辦法,需要的朋友可以參考下2023-02-02
JavaScript中的另一個機制：cookie，則可以達(dá)到真正全局變量的要求。 cookie是瀏覽器 提供的一種機制，它將document 對象的cookie屬性提供給JavaScript?？梢杂蒍avaScript對其進(jìn)行控制，而并不是JavaScript本身的性質(zhì)。2008-05-05
使用pcs api往免費的百度網(wǎng)盤上傳下載文件的方法
百度個人云盤空間大，完全免費，而且提供了pcs api供調(diào)用操作文件，在平時的項目里往里面保存一些文件是很實用的。通過本文給大家介紹使用pcs api往免費的百度網(wǎng)盤上傳下載文件的方法，感興趣的朋友一起學(xué)習(xí)吧2016-03-03
這篇文章主要介紹了JavaScript獲取數(shù)組最小值和最大值的方法,涉及javascript中min與max方法的使用技巧,非常簡單實用,需要的朋友可以參考下2015-06-06