动画菜单:我应该使用画布还是JavaScript

animate menu: shall I use canvas or javascript?

本文关键字：JavaScript 菜单 我应该 动画      更新时间：2023-09-26

我必须对具有特定图形的主菜单链接(关于我们，联系人等(进行动画处理(我正在使用带有背景图像类的锚点(。我想知道画布是否是动画特定div(我的菜单(的最佳方式。我只想在点击后向上/向下移动 100px。例如：我单击"项目"，我的锚点(带有我的图像(向下移动了 100 像素。当我单击"关于我们"时，"项目"链接向上移动(在其原始位置(，"关于我们"向下移动100px。

画布是正确的方法吗？我也可以使用 css3 过渡/动画，但不支持 IE9。我希望IE9能够正确呈现我的网站。

我应该为此使用画布还是某种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);
         }
     }
 }

如果需要广泛的浏览器支持，请使用jQuery的animate()函数。如果没有，请使用 CSS3 过渡。

如果您不关心动画的外观，只要它们大致相同，您就可以利用 Modernizr 将 CSS3 动画交付给支持它们的浏览器，并将 jQuery 动画交付给不支持它们的浏览器。

jQuery的animate()函数可以原生地将CSS3动画传递给符合条件的浏览器，这是毫无价值的，但jQuery的开发人员还没有实现这一点。这可能是因为浏览器仍然以不同程度的成功实现CSS3转换，而jQuery旨在保持一致。

Canvas 并不适合用例 IMO，因为它是从您的语义元素中抽象出来的。

这里有一个关于如何做到这一点的例子

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>
相关文章：