我们我们上篇博客封装的动画函数这是一个长期使用的函数,以后的博客就忽略掉他了,接下来我们介绍的是筋斗云的案例
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);
}