欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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實現(xiàn)OC和JS交互詳解

    JavaScriptCore是webkit的一個重要組成部分,主要是對JS進行解析和提供執(zhí)行環(huán)境。下面這篇文章主要給大家介紹了使用JavaScriptCore實現(xiàn)OC和JS交互的相關(guān)資料,文中介紹的非常詳細(xì),需要的朋友可以參考學(xué)習(xí),下面來一起看看吧。
    2017-03-03
  • 談?wù)刯avascript中使用連等賦值操作帶來的問題

    談?wù)刯avascript中使用連等賦值操作帶來的問題

    這篇文章主要介紹了javascript中使用連等賦值操作帶來的問題的相關(guān)資料,需要的朋友可以參考下
    2015-11-11
  • HTML+JavaScript模擬實現(xiàn)簡單的時鐘效果

    HTML+JavaScript模擬實現(xiàn)簡單的時鐘效果

    在這篇文章中,主要將向大家展示如何使用?HTML、CSS?和?JavaScript代碼制作模擬時鐘,文中的示例代碼講解詳細(xì),感興趣的可以了解一下
    2022-08-08
  • 微信小程序websocket聊天室的實現(xiàn)示例代碼

    微信小程序websocket聊天室的實現(xiàn)示例代碼

    這篇文章主要介紹了微信小程序websocket聊天室的實現(xiàn)示例代碼,小程序本身對http、websocket等連接均有諸多限制,所以這次項目選擇了node.js自帶的ws模塊。感興趣的可以參考一下
    2019-02-02
  • JS/HTML5游戲常用算法之路徑搜索算法 隨機迷宮算法詳解【普里姆算法】

    JS/HTML5游戲常用算法之路徑搜索算法 隨機迷宮算法詳解【普里姆算法】

    這篇文章主要介紹了JS/HTML5游戲常用算法之路徑搜索算法 隨機迷宮算法,結(jié)合實例形式詳細(xì)分析了針對迷宮游戲路徑搜索算法的普里姆算法相關(guān)原理、實現(xiàn)方法及操作注意事項,需要的朋友可以參考下
    2018-12-12
  • 模擬彈出菜單的代碼

    模擬彈出菜單的代碼

    模擬彈出菜單的代碼...
    2007-08-08
  • JavaScript利用fetch實現(xiàn)異步請求的方法實例

    JavaScript利用fetch實現(xiàn)異步請求的方法實例

    傳遞信息到服務(wù)器,從服務(wù)器獲取信息,是前端發(fā)展的重中之重,尤其是現(xiàn)在前后端分離的大前提下,前后端的數(shù)據(jù)交互是前端的必修科目了,下面這篇文章主要給大家介紹了關(guān)于JavaScript利用fetch實現(xiàn)異步請求的相關(guān)資料,需要的朋友可以參考借鑒。
    2017-07-07
  • Javascript 解疑

    Javascript 解疑

    Javascript 解疑,需要的朋友可以參考下。
    2009-11-11
  • 微信小程序?qū)崿F(xiàn)多行文字滾動

    微信小程序?qū)崿F(xiàn)多行文字滾動

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)多行文字滾動,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-11-11
  • JavaScript中Map與reduce的應(yīng)用小結(jié)

    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

最新評論