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

JS實現(xiàn)物體帶緩沖的間歇運動效果示例

 更新時間：2016年12月22日 09:40:07   作者：hcjavascript  
這篇文章主要介紹了JS實現(xiàn)物體帶緩沖的間歇運動效果,可實現(xiàn)物體定時間歇運動的功能,涉及javascript定時器、數(shù)學運算及頁面元素動態(tài)修改的相關操作技巧,需要的朋友可以參考下

本文實例講述了JS實現(xiàn)物體帶緩沖的間歇運動效果。分享給大家供大家參考，具體如下：

<!DOCTYPE HTML>
<html>
<head>
 <meta http-equiv="content-type" charset="utf-8" />
  <meta http-equiv="content-type" content="text/html" />
  <title>demo</title>
</head>
<body>
<div id="odiv" style="position:absolute;width:200px;height:100px;background:red;left:0;border:1px solid #333;"></div>
<script type="text/javascript">
var odiv=document.getElementById('odiv');
odiv.onmouseover=function(){
move(this,'width',500,function(){
move(odiv,'left',300,function(){
move(odiv,'height',500,function(){
move(odiv,'borderWidth',10)
});
});
});
}
function move(obj,arr,target,fn){
  clearInterval(obj.dt);
  obj.dt=setInterval(function(){
  obj.ol=parseInt(obj.style[arr]);
  if(obj.ol==target){
    clearInterval(obj.dt);
    if(fn) fn();
  }else{
  obj.speed=(target-obj.ol)/8;
    obj.speed>0?obj.speed=Math.ceil(obj.speed):obj.speed=Math.floor(obj.speed);
    obj.style[arr]=obj.ol+obj.speed+"px";
  }
  },30);
}
</script>
</body>
</html>

更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript運動效果與技巧匯總》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。

相關文章

  • 微信小程序自定義波浪組件使用方法詳解

    微信小程序自定義波浪組件使用方法詳解

    這篇文章主要為大家詳細介紹了微信小程序自定義波浪組件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2019-09-09
  • javascript實現(xiàn)移動端觸屏拖拽功能

    javascript實現(xiàn)移動端觸屏拖拽功能

    這篇文章主要為大家詳細介紹了javascript實現(xiàn)移動端觸屏拖拽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-07-07
  • js獲取對象屬性值的兩種方法使用總結

    js獲取對象屬性值的兩種方法使用總結

    這篇文章主要給大家介紹了關于js獲取對象屬性值的兩種方法使用,分別是通過.獲取和通過[]獲取這兩種方法,文中介紹了詳細的方法和不同點,需要的朋友可以參考下
    2023-05-05
  • 如何利用JavaScript實現(xiàn)排序算法淺析

    如何利用JavaScript實現(xiàn)排序算法淺析

    排序算法是筆試中經常出現(xiàn)的,提起排序算法就一定要提下算法復雜度和大O表示法,算法復雜度是指算法在編寫成可執(zhí)行程序后，運行時所需要的資源，資源包括時間資源和內存資源,這篇文章主要給大家介紹了關于如何利用JavaScript實現(xiàn)排序算法的相關資料,需要的朋友可以參考下
    2021-11-11
  • 淺談JS的二進制家族

    淺談JS的二進制家族

    事實上，前端很少涉及對二進制數(shù)據(jù)的處理，但即便如此，我們偶爾總能在角落里看見它們的身影。 今天我們就來聊一聊前端的二進制家族：Blob、ArrayBuffer和Buffer
    2021-05-05
  • JavaScript實現(xiàn)垂直向上無縫滾動特效代碼

    JavaScript實現(xiàn)垂直向上無縫滾動特效代碼

    下面小編就為大家?guī)硪黄狫avaScript實現(xiàn)垂直向上無縫滾動特效代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-11-11
  • 詳解JS對象遍歷的順序問題

    詳解JS對象遍歷的順序問題

    你知不知道JS對象遍歷順序，本文就來詳細的介紹了一下JS對象遍歷順序問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2021-08-08
  • Asp.Net之JS生成分頁條的方法

    Asp.Net之JS生成分頁條的方法

    下面小編就為大家?guī)硪黄狝sp.Net之JS生成分頁條的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-11-11
  • TypeScript高級用法的知識點匯總

    TypeScript高級用法的知識點匯總

    這篇文章主要給大家介紹了關于TypeScript高級用法的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用TypeScript具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
    2019-12-12
  • 基于JavaScript概括瀏覽器方向的優(yōu)化

    基于JavaScript概括瀏覽器方向的優(yōu)化

    這篇文章主要介紹了JavaScript瀏覽器方向的優(yōu)化，文章圍繞主題展開詳細的內容介紹具有一定的參考價值，需要的小伙伴可以參考一下
    2022-05-05

最新評論