演示已更新。
演示:http://labs.cloudream.name/jquery/move.html
效果看上去还不错,是吧?呵呵。代码超级简单哦。
[run]
//等待文档完成加载
$(document).ready(function(){
//为颜色div赋默认宽度值(第一个span块)
$("div").width($("span").width());
//例遍所有span,以下$(this)均为各span块
$("span").each(function(){
//绑定鼠标进入事件
$(this).mouseover(function(){
//div颜色块使用动画效果,{}内为最终效果,速度为slow(也可以设置完成毫秒数)
$("div").animate({
//宽度设置为当前span宽度
width: $(this).width(),
//左边距设置为当前span的网页x坐标
marginLeft: $(this).offset().left
}
//显示速度
,"slow"
);
});
});
});
[/run]
很简单,很优雅,对吧?