JS實(shí)現(xiàn)簡(jiǎn)單的浮動(dòng)碰撞效果示例
更新時(shí)間：2017年12月28日 15:44:19 作者：又見(jiàn)水出處
這篇文章主要介紹了JS實(shí)現(xiàn)簡(jiǎn)單的浮動(dòng)碰撞效果,類(lèi)似于廣告懸浮圖片在屏幕上來(lái)回碰撞的效果,涉及javascript結(jié)合時(shí)間動(dòng)態(tài)操作頁(yè)面元素屬性的相關(guān)技巧,需要的朋友可以參考下
本文實(shí)例講述了JS實(shí)現(xiàn)簡(jiǎn)單的浮動(dòng)碰撞效果。分享給大家供大家參考，具體如下：
<html>
<head>
<meta charset="UTF-8">
<title>m.fzitv.net JS碰撞效果</title>
<script language="javascript">
<!--
directX=1; //X軸方向
directY=1; //Y軸方向
sunX=0;
sunY=0;
function sunMov(){
//定兩個(gè)方向
sunX+=directX*2;
sunY+=directY*2;
//修改div的left top
sundiv.style.top=sunY+"px";
sundiv.style.left=sunX+"px";
//判斷什么時(shí)候，轉(zhuǎn)變方向
//x方向(offestWidth可以返回，當(dāng)前這個(gè)對(duì)象的實(shí)際寬度)
if(sunX+sundiv.offsetWidth>=document.body.clientWidth || sunX<=0){
directX=-directX;
}
if(sunY+sundiv.offsetHeight>=document.body.clientHeight || sunY<=0){
directY=-directY;
}
}
setInterval("sunMov()",10);
//-->
</script>
</head>
<body style="/*background-image:URL('a.jpg');background-size:cover; background-repeat:no-repeat*/">
<div id="sundiv" style="position:absolute">
<img src="http://m.fzitv.net/images/logo.gif"/>
</div>
</body>
</html>
運(yùn)行效果：
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《JavaScript運(yùn)動(dòng)效果與技巧匯總》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫(huà)特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
相關(guān)文章
JavaScript中清空數(shù)組的三種方法分享，需要的朋友可以參考下。2011-04-04
Save a File Using a File Save Dialog Box
Save a File Using a File Save Dialog Box...2007-06-06
JS添加刪除一組文本框并對(duì)輸入信息加以驗(yàn)證判斷其正確性
需要添加幾組數(shù)據(jù)到數(shù)據(jù)庫(kù)，但是具體幾組數(shù)據(jù)不確定，有客戶(hù)來(lái)填寫(xiě)，所以，這里我用JS進(jìn)行添加刪除子方案，并要對(duì)方案輸入的正確性加以判斷，感興趣的朋友可以了解下2013-04-04
javascript 獲取鼠標(biāo)的絕對(duì)位置 event
javascript 獲取鼠標(biāo)的絕對(duì)位置 event2009-06-06
序列化是將對(duì)象狀態(tài)轉(zhuǎn)換為可保持或可傳輸?shù)母袷降倪^(guò)程。與序列化相對(duì)的是反序列化，它將流轉(zhuǎn)換為對(duì)象。這兩個(gè)過(guò)程結(jié)合起來(lái)，可以輕松地存儲(chǔ)和傳輸數(shù)據(jù)2013-07-07
這篇文章主要為大家詳細(xì)介紹了微信小程序ibeacon三點(diǎn)定位的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-10-10
JS實(shí)現(xiàn)超級(jí)好看的鼠標(biāo)小尾巴特效
這篇文章主要給大家介紹了關(guān)于JS實(shí)現(xiàn)超級(jí)好看的鼠標(biāo)小尾巴特效的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章主要介紹了js 數(shù)據(jù)類(lèi)型判斷的方法，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2020-12-12
JS+CSS實(shí)現(xiàn)滑動(dòng)切換tab菜單效果
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)滑動(dòng)切換tab菜單效果,涉及javascript鼠標(biāo)事件及頁(yè)面元素樣式的動(dòng)態(tài)切換效果實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-08-08
PHP實(shí)現(xiàn)記錄代碼運(yùn)行時(shí)間封裝類(lèi)實(shí)例教程
這篇文章主要給大家介紹了利用PHP實(shí)現(xiàn)記錄代碼運(yùn)行時(shí)間的封裝類(lèi)的相關(guān)教程，文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，需要的朋友可以參考下2017-05-05