快捷導(dǎo)航

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

更新時間：2016年12月22日 09:40:07 作者：hcjavascript

這篇文章主要介紹了JS實現(xiàn)物體帶緩沖的間歇運(yùn)動效果,可實現(xiàn)物體定時間歇運(yùn)動的功能,涉及javascript定時器、數(shù)學(xué)運(yùn)算及頁面元素動態(tài)修改的相關(guān)操作技巧,需要的朋友可以參考下

本文實例講述了JS實現(xiàn)物體帶緩沖的間歇運(yù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程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

微信小程序自定義波浪組件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義波浪組件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-09-09
javascript實現(xiàn)移動端觸屏拖拽功能
這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)移動端觸屏拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-07-07
js獲取對象屬性值的兩種方法使用總結(jié)
這篇文章主要給大家介紹了關(guān)于js獲取對象屬性值的兩種方法使用,分別是通過.獲取和通過[]獲取這兩種方法,文中介紹了詳細(xì)的方法和不同點,需要的朋友可以參考下
2023-05-05
如何利用JavaScript實現(xiàn)排序算法淺析
排序算法是筆試中經(jīng)常出現(xiàn)的,提起排序算法就一定要提下算法復(fù)雜度和大O表示法,算法復(fù)雜度是指算法在編寫成可執(zhí)行程序后，運(yùn)行時所需要的資源，資源包括時間資源和內(nèi)存資源,這篇文章主要給大家介紹了關(guān)于如何利用JavaScript實現(xiàn)排序算法的相關(guān)資料,需要的朋友可以參考下
2021-11-11
淺談JS的二進(jìn)制家族
事實上，前端很少涉及對二進(jìn)制數(shù)據(jù)的處理，但即便如此，我們偶爾總能在角落里看見它們的身影。今天我們就來聊一聊前端的二進(jìn)制家族：Blob、ArrayBuffer和Buffer
2021-05-05
JavaScript實現(xiàn)垂直向上無縫滾動特效代碼
下面小編就為大家?guī)硪黄狫avaScript實現(xiàn)垂直向上無縫滾動特效代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-11-11
詳解JS對象遍歷的順序問題
你知不知道JS對象遍歷順序，本文就來詳細(xì)的介紹了一下JS對象遍歷順序問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08
Asp.Net之JS生成分頁條的方法
下面小編就為大家?guī)硪黄狝sp.Net之JS生成分頁條的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-11-11
TypeScript高級用法的知識點匯總
這篇文章主要給大家介紹了關(guān)于TypeScript高級用法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用TypeScript具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-12-12
基于JavaScript概括瀏覽器方向的優(yōu)化
這篇文章主要介紹了JavaScript瀏覽器方向的優(yōu)化，文章圍繞主題展開詳細(xì)的內(nèi)容介紹具有一定的參考價值，需要的小伙伴可以參考一下
2022-05-05