快捷導(dǎo)航

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

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

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

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

<!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>

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

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