js實現(xiàn)類似jquery里animate動畫效果的方法

更新時間：2015年04月10日 09:30:46 作者：jingangel

這篇文章主要介紹了js實現(xiàn)類似jquery里animate動畫效果的方法,實例分析了javascript模擬實現(xiàn)jQuery中animate動畫效果的技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了js實現(xiàn)類似jquery里animate動畫效果的方法。分享給大家供大家參考。具體分析如下：

該實例可實現(xiàn)鼠標移上，先寬度變化，再高度變化，最后透明度變化，鼠標移出，再依次變回去的效果。

要點一：

startrun(obj,attr,target,fn)
box.onmouseover = function(){
startrun(box,"width",200,function(){
startrun(box,"height",200,function(){
startrun(box,"opacity","100")
});
});
}

如上面，函數(shù)也可以做為參數(shù)使用，就可以達到先執(zhí)行某個動作，再執(zhí)行某個動作的效果了。

要點二：

if(cur == target){
clearInterval(obj.timer);
if(fn){
fn();
}
}

當運動到達目標點，關閉定時器，然后就可以執(zhí)行新的函數(shù)了。

最后，上代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>無標題文檔</title>
<style>
<!--
body{margin:0; padding:0; font:12px/1.5 arial;}
#box{width:100px; height:100px; position:absolute;
background:#06c; left:0;filter:alpha(opacity=30); opacity:0.3;}
-->
</style>
<script>
<!--
function getstyle(obj,name){
 if(obj.currentStyle){
  return obj.currentStyle[name];
 }else{
  return getComputedStyle(obj,false)[name];
 }
}
window.onload = function(){
 var box = document.getElementById("box");
 box.onmouseover = function(){
  startrun(box,"width",200,function(){
   startrun(box,"height",200,function(){
    startrun(box,"opacity","100")
   });
  });
 }
 box.onmouseout = function(){
  startrun(box,"height",100,function(){
   startrun(box,"width",100,function(){
    startrun(box,"opacity","30");
   });
  });
 }
}
function startrun(obj,attr,target,fn){
 clearInterval(obj.timer);
 obj.timer = setInterval(function(){
  var cur = 0;
  if(attr == "opacity"){
   cur = Math.round(parseFloat(getstyle(obj,attr))*100);
  }else{
   cur = parseInt(getstyle(obj,attr));
  }
  var speed = (target-cur)/8;
  speed = speed>0?Math.ceil(speed):Math.floor(speed);
  
  if(cur == target){
   clearInterval(obj.timer);
   if(fn){
    fn();
   }
  }else{
   if(attr == "opacity"){
    obj.style.filter = "alpha(opacity="+(cur+speed)+")";
    obj.style.opacity = (cur+speed)/100;
   }else{
   obj.style[attr] = cur + speed + "px";
   }
  }
 },30)
}
//-->
</script>
</head>
<body>
<div id="box">
</div>
</body>
</html>

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

您可能感興趣的文章:

Code：loadScript( )加載js的功能函數(shù)
Code：loadScript( )加載js的功能函數(shù)...
2007-02-02
javascript Array對象基礎知識小結
感覺自己對Array對象總是有種朦朧的感覺，今天自己手寫總結，加深一下印象。
2010-11-11
JavaScript實現(xiàn)獲取用戶單擊body中所有A標簽內(nèi)容的方法
這篇文章主要介紹了JavaScript實現(xiàn)獲取用戶單擊body中所有A標簽內(nèi)容的方法,涉及javascript針對頁面元素及事件響應相關操作技巧,需要的朋友可以參考下
2017-06-06
如何利用JS檢查元素是否在視口內(nèi)
這篇文章主要給大家介紹了關于如何利用JS檢查元素是否在視口內(nèi)的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-04-04
javascript設計模式Constructor（構造器）模式
這篇文章主要為大家詳細介紹了javascript設計模式Constructor（構造器）模式，感興趣的小伙伴們可以參考一下
2016-08-08
JavaScript多功能甘特圖組件jsGantt詳解
jsGantt是一個可定制的、靈活的、多語言的甘特圖組件，由原生 JavaScript構建，它使用客戶端渲染以獲得快速的性能和動態(tài)的交互性，非常適用于任何需要交互式時間線或時間表顯示的項目，本文就給大家介紹一下JavaScript多功能甘特圖組件jsGantt
2023-07-07
DOM_window對象屬性之--clipboardData對象操作代碼
clipboardData 對象提供了對于預定義的剪貼板格式的訪問，以便在編輯操作中使用。
2011-02-02
基于JavaScript構建高級視頻播放器
這篇文章主要為大家詳細介紹了如何基于JavaScript構建高級視頻播放器,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下
2024-04-04
JavaScript實現(xiàn)平滑滾動效果
頁面平滑滾動是網(wǎng)頁一種常見的效果,平滑滾動的原理其實很簡單,無非就是讓頁面一種肉眼可見的速度從當前位置滾動到指定位置,那如何用原生的JS實現(xiàn)這也效果呢？本文給大家介紹了JavaScript實現(xiàn)平滑滾動效果,需要的朋友可以參考下
2024-06-06
Taro集成Redux快速上手的方法示例
這篇文章主要介紹了Taro集成Redux快速上手的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-06-06