快捷導(dǎo)航

Js實(shí)現(xiàn)簡(jiǎn)單的小球運(yùn)動(dòng)特效

更新時(shí)間：2016年02月18日 11:52:22 投稿：mrr

這篇文章主要介紹了Js實(shí)現(xiàn)簡(jiǎn)單的小球運(yùn)動(dòng)特效的相關(guān)資料,需要的朋友可以參考下

廢話不多說(shuō)了，直接給大家貼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=;//定義一個(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)文章

JavaScript實(shí)現(xiàn)飛舞的泡泡效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)飛舞的泡泡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-02-02
JavaScript實(shí)現(xiàn)字符串轉(zhuǎn)JSON對(duì)象的4種方法代碼
這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)字符串轉(zhuǎn)JSON對(duì)象的4種方法,使用ajax的開(kāi)發(fā)項(xiàng)目過(guò)程中,經(jīng)常需要將json格式的字符串返回到前端,前端解析成js對(duì)象(JSON),需要的朋友可以參考下
2023-10-10
分享javascript計(jì)算時(shí)間差的示例代碼
這篇文章主要為大家介紹了javascript計(jì)算時(shí)間差的示例代碼，，一般來(lái)說(shuō)都是計(jì)算當(dāng)前時(shí)間和一個(gè)指定時(shí)間點(diǎn)之間的差距，感興趣的小伙伴們可以參考一下
2016-01-01
JavaScript null和undefined區(qū)別分析
在JavaScript開(kāi)發(fā)中，被人問(wèn)到：null與undefined到底有啥區(qū)別？
2009-10-10
使用JS實(shí)現(xiàn)導(dǎo)航切換時(shí)高亮顯示的示例講解
今天小編就為大家分享一篇使用JS實(shí)現(xiàn)導(dǎo)航切換時(shí)高亮顯示的示例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
JS數(shù)據(jù)類型分類及常用判斷方法
這篇文章主要介紹了JS數(shù)據(jù)類型分類及常用判斷方法,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-11-11
前端判斷節(jié)假日的詳細(xì)代碼舉例
因?yàn)橐鲆粋€(gè)日歷控件,遇到國(guó)家法定節(jié)假日,怎么實(shí)現(xiàn)此功能呢?這篇文章主要給大家介紹了關(guān)于前端判斷節(jié)假日的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-08-08
js實(shí)現(xiàn)精美的圖片跟隨鼠標(biāo)效果實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)精美的圖片跟隨鼠標(biāo)效果,實(shí)例分析了javascript鼠標(biāo)事件及頁(yè)面樣式的操作技巧,需要的朋友可以參考下
2015-05-05
js實(shí)現(xiàn)圖片淡入淡出效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)圖片淡入淡出效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
JScript 腳本實(shí)現(xiàn)文件下載一般用于下載木馬
腳本實(shí)現(xiàn)文件下載，這個(gè)是jscript的，腳本之家以前曾發(fā)布vbscript版本的,原理一樣的。
2009-10-10