動畫菜單：我應該使用canvas還是javascript？

我必須動畫我的主菜單鏈接（關於我們，聯繫等）有特定的圖形（我正在使用錨背景圖像類）。我想知道如果畫布是使特定的div（我的菜單）動畫的最佳方式。我只想在點擊後向上/向下移動100px。例如：我點擊「項目」，我的錨（與我的圖像）被移動100像素。當我點擊「關於我們」時，「項目」鏈接向上移動（在原始位置），「關於我們」向下移動100px。動畫菜單：我應該使用canvas還是javascript？

帆布是正確的做法嗎？我也可以使用css3轉換/動畫，但不支持IE9。我希望IE9能夠正確呈現我的網站。

我應該使用canvas還是某種javascript插件？（我也可以用相對/絕對定位的普通JavaScript，不斷改變頂部像素，但我不喜歡它的結果）。我用普通的JavaScript中使用什麼是這樣的：

我的菜單：

<div id="menu"> 
    <ul class="nav"> 
     <li><a href="#" class="projects" id="projects" onclick="move()"></a> 
     </li> 

     <li><a href="#" class="aboutus"></a> 
     </li> 

     <li><a href="#" class="contact"></a> 
     </li> 
    </ul>

我的CSS：

a.projects 
{ 
    width: 184px; 
    height: 32px; 
    background: url('css-images/projects.png') no-repeat; 
     position: absolute; 
} 
#menu 
{ 
    position:relative; 
}

我的javascript：

function move(){ 
    var proj = document.getElementById("projects"); 
    var count = 0; 
    var id = setInterval(loop, 30); 

    function loop(){ 
     proj.style.top = count + "px"; 

     var max = 100; 
     count+=10; 
     if(count >= max){ 
     clearInterval(id); 
     } 
    } 
}

來源

2013-10-07 Harmonia

什麼所有的瀏覽器，你真的想支持？如果支持IE不那麼重要，那麼可以使用CSS3動畫，因爲它們比改變CSS頂部像素值更平滑。 – Abhidev

嘿，你可以使用css3在你的網站上訪問這個鏈接http://tympanus.net/Tutorials/CreativeCSS3AnimationMenus/index.html –

轉到與jQuery的animate()函數，如果需要廣泛的瀏覽器支持。如果沒有，請使用CSS3 transitions。

如果您不關心動畫的外觀如何，只要它們大致相同，則可以利用Modernizr向支持它們的瀏覽器提供CSS3動畫，向不支持它們的jQuery動畫提供動畫。

值得什麼，jQuery的animate()功能可以本身提供CSS3動畫爲符合條件的瀏覽器，但jQuery的開發者還沒有實現這一點。這可能是因爲瀏覽器仍然實現了不同程度的成功的CSS3轉換，而jQuery的目的是保持事物的一致性。

由於抽象語義元素，Canvas並不適合用例IMO。

來源

2013-10-07 10:55:51

謝謝，我用動畫。我不知道。 – Harmonia

這裏有一個例子就如何做到這

的Javascript：

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
<script> 
$(document).ready(function() { 
    //BOX 1 
    $('#b1').click(function(){ 
     $('#box1').animate(
     { 
      height:'300px' 
     }); 

     $('#box2').animate(
     { 
      height:'10px' 
     }); 

     $('#box3').animate(
     { 
      height:'10px' 
     }); 

    }); 

    //BOX 2 
    $('#b2').click(function(){ 
     $('#box1').animate(
     { 
      height:'10px' 
     }); 

     $('#box2').animate(
     { 
      height:'300px' 
     }); 

     $('#box3').animate(
     { 
      height:'10px' 
     }); 

    }); 

    //BOX 3 
    $('#b3').click(function(){ 
     $('#box1').animate(
     { 
      height:'10px' 
     }); 

     $('#box2').animate(
     { 
      height:'10px' 
     }); 

     $('#box3').animate(
     { 
      height:'300px' 
     }); 

    }); 


}); 

</script>

CSS：

<style> 
#box1 { 
height:10px; 
width:25%; 
background-color:red; 
float:left; 
margin-right:2%;  
} 

#box2 { 
    height:10px; 
width:25%; 
background-color:green; 
margin-right:2%; 
float:left; 
} 

#box3 { 
    height:10px; 
width:25%; 
background-color:blue; 
margin-right:2%; 
float:left; 
} 
</style>

HTML：

<a href="#"id="b1"><div id="box1"></div></a> 
<a href="#" id="b2"><div id="box2"></div></a> 
<a href="#" id="b3"><div id="box3"></div></a>

來源

2013-10-07 19:19:29

動畫菜單：我應該使用canvas還是javascript？

回答

相關問題