JS實(shí)現(xiàn)簡(jiǎn)單的浮動(dòng)碰撞效果示例
更新時(shí)間：2017年12月28日 15:44:19 作者：又見水出處
這篇文章主要介紹了JS實(shí)現(xiàn)簡(jiǎn)單的浮動(dòng)碰撞效果,類似于廣告懸浮圖片在屏幕上來回碰撞的效果,涉及javascript結(jié)合時(shí)間動(dòng)態(tài)操作頁面元素屬性的相關(guān)技巧,需要的朋友可以參考下
本文實(shí)例講述了JS實(shí)現(xiàn)簡(jiǎn)單的浮動(dòng)碰撞效果。分享給大家供大家參考，具體如下：
<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(){
//定兩個(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://www.dbjr.com.cn/images/logo.gif"/>
</div>
</body>
</html>
運(yùn)行效果：
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript運(yùn)動(dòng)效果與技巧匯總》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《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)文章
使用JavaScriptCore實(shí)現(xiàn)OC和JS交互詳解
JavaScriptCore是webkit的一個(gè)重要組成部分，主要是對(duì)JS進(jìn)行解析和提供執(zhí)行環(huán)境。下面這篇文章主要給大家介紹了使用JavaScriptCore實(shí)現(xiàn)OC和JS交互的相關(guān)資料，文中介紹的非常詳細(xì)，需要的朋友可以參考學(xué)習(xí)，下面來一起看看吧。2017-03-03
這篇文章主要介紹了javascript中使用連等賦值操作帶來的問題的相關(guān)資料,需要的朋友可以參考下2015-11-11
HTML+JavaScript模擬實(shí)現(xiàn)簡(jiǎn)單的時(shí)鐘效果
在這篇文章中，主要將向大家展示如何使用?HTML、CSS?和?JavaScript代碼制作模擬時(shí)鐘，文中的示例代碼講解詳細(xì)，感興趣的可以了解一下2022-08-08
微信小程序websocket聊天室的實(shí)現(xiàn)示例代碼
這篇文章主要介紹了微信小程序websocket聊天室的實(shí)現(xiàn)示例代碼，小程序本身對(duì)http、websocket等連接均有諸多限制，所以這次項(xiàng)目選擇了node.js自帶的ws模塊。感興趣的可以參考一下2019-02-02
JS/HTML5游戲常用算法之路徑搜索算法 隨機(jī)迷宮算法詳解【普里姆算法】
這篇文章主要介紹了JS/HTML5游戲常用算法之路徑搜索算法 隨機(jī)迷宮算法,結(jié)合實(shí)例形式詳細(xì)分析了針對(duì)迷宮游戲路徑搜索算法的普里姆算法相關(guān)原理、實(shí)現(xiàn)方法及操作注意事項(xiàng),需要的朋友可以參考下2018-12-12
模擬彈出菜單的代碼...2007-08-08
JavaScript利用fetch實(shí)現(xiàn)異步請(qǐng)求的方法實(shí)例
傳遞信息到服務(wù)器，從服務(wù)器獲取信息，是前端發(fā)展的重中之重，尤其是現(xiàn)在前后端分離的大前提下，前后端的數(shù)據(jù)交互是前端的必修科目了，下面這篇文章主要給大家介紹了關(guān)于JavaScript利用fetch實(shí)現(xiàn)異步請(qǐng)求的相關(guān)資料，需要的朋友可以參考借鑒。2017-07-07
Javascript 解疑，需要的朋友可以參考下。2009-11-11
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)多行文字滾動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
JavaScript中Map與reduce的應(yīng)用小結(jié)
Map構(gòu)造函數(shù)創(chuàng)建一個(gè)新Map對(duì)象,它允許以鍵值對(duì)的形式存儲(chǔ)數(shù)據(jù),提供了一種更加靈活的數(shù)據(jù)結(jié)構(gòu),本文給大家介紹JavaScript中Map與reduce的應(yīng)用小結(jié),感興趣的朋友一起看看吧2024-06-06