0

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

画布是正确的方法吗？我也可以使用 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);
         }
     }
 }
4

2 回答 2

1

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

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

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

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

于 2013-10-07T10:55:51.400 回答
0

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

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-07T19:19:29.760 回答