DOM加强特效篇之筋斗云案例

    我们我们上篇博客封装的动画函数这是一个长期使用的函数，以后的博客就忽略掉他了，接下来我们介绍的是筋斗云的案例

HTML代码

<div class="nav">
    <span id="cloud"></span>
    <ul id="navBar">
        <li>北京校区</li>
        <li>上海校区</li>
        <li>广州校区</li>
        <li>深圳校区</li>
        <li>武汉校区</li>
        <li>关于我们</li>
        <li>联系我们</li>
        <li>招贤纳士</li>
    </ul>
</div>

JS代码

//鼠标移动到li标签上后云彩移动到当前的li的位置
    //鼠标如果离开li标签以后，云彩就会移动到上一次的云彩的位置
    //鼠标点击li标签，云彩就停留到这个li标签的位置
    //首先获取云彩
    var cloud=my$("cloud");
    //获取ul中的所有的li
    var lis=my$("navBar").children;
    for(var i=0;i<lis.length;i++){
        lis[i].οnmοuseοver=mouseoverHandle;
        lis[i].οnmοuseοut=mouseoutHandle;
        lis[i].οnclick=clickHandle;
    }
    function mouseoverHandle(){
        //让云彩的left移动到li的当前位置
        animate(cloud,this.offsetLeft);
    }
    var lastLeft=0;
    function mouseoutHandle(){
        lastLeft=this.offsetLeft;
    }
    function clickHandle(){
        animate(cloud,lastLeft);
    }