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