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.dbjr.com.cn 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.dbjr.com.cn/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)文章
使用JavaScriptCore實現(xiàn)OC和JS交互詳解
JavaScriptCore是webkit的一個重要組成部分，主要是對JS進行解析和提供執(zhí)行環(huán)境。下面這篇文章主要給大家介紹了使用JavaScriptCore實現(xiàn)OC和JS交互的相關(guān)資料，文中介紹的非常詳細(xì)，需要的朋友可以參考學(xué)習(xí)，下面來一起看看吧。2017-03-03
這篇文章主要介紹了javascript中使用連等賦值操作帶來的問題的相關(guān)資料,需要的朋友可以參考下2015-11-11
HTML+JavaScript模擬實現(xiàn)簡單的時鐘效果
在這篇文章中，主要將向大家展示如何使用?HTML、CSS?和?JavaScript代碼制作模擬時鐘，文中的示例代碼講解詳細(xì)，感興趣的可以了解一下2022-08-08
微信小程序websocket聊天室的實現(xiàn)示例代碼
這篇文章主要介紹了微信小程序websocket聊天室的實現(xiàn)示例代碼，小程序本身對http、websocket等連接均有諸多限制，所以這次項目選擇了node.js自帶的ws模塊。感興趣的可以參考一下2019-02-02
JS/HTML5游戲常用算法之路徑搜索算法 隨機迷宮算法詳解【普里姆算法】
這篇文章主要介紹了JS/HTML5游戲常用算法之路徑搜索算法 隨機迷宮算法,結(jié)合實例形式詳細(xì)分析了針對迷宮游戲路徑搜索算法的普里姆算法相關(guān)原理、實現(xiàn)方法及操作注意事項,需要的朋友可以參考下2018-12-12
模擬彈出菜單的代碼...2007-08-08
JavaScript利用fetch實現(xiàn)異步請求的方法實例
傳遞信息到服務(wù)器，從服務(wù)器獲取信息，是前端發(fā)展的重中之重，尤其是現(xiàn)在前后端分離的大前提下，前后端的數(shù)據(jù)交互是前端的必修科目了，下面這篇文章主要給大家介紹了關(guān)于JavaScript利用fetch實現(xiàn)異步請求的相關(guān)資料，需要的朋友可以參考借鑒。2017-07-07
Javascript 解疑，需要的朋友可以參考下。2009-11-11
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)多行文字滾動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
JavaScript中Map與reduce的應(yīng)用小結(jié)
Map構(gòu)造函數(shù)創(chuàng)建一個新Map對象,它允許以鍵值對的形式存儲數(shù)據(jù),提供了一種更加靈活的數(shù)據(jù)結(jié)構(gòu),本文給大家介紹JavaScript中Map與reduce的應(yīng)用小結(jié),感興趣的朋友一起看看吧2024-06-06