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