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