本文介绍了一种使用jQuery库来动态改变颜色块宽度和位置的方法。通过为颜色div分配默认宽度值，并在鼠标悬停于span元素时，利用动画效果调整div的宽度和左边距，从而实现美观且交互式的视觉效果。
点击这里使用RSS订阅本Blog：
效果演示：
http://labs.cloudream.name/jquery/move.html
//
等待文档完成加载
$(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"
);
});
});
}
);
很简单，很优雅
摘自【 随想飞翔】 <script type="text/javascript" src="http://www.google.com/reader/ui/publisher.js"></script> <script type="text/javascript" src="http://www.google.com/reader/public/javascript/user/00697638153916680411/state/com.google/broadcast?n=5&callback=GRC_p(%7Bc%3A%22green%22%2Ct%3A%22%5Cu8FD9%5Cu4E9B%5Cu6587%5Cu7AE0%5Cu4E5F%5Cu503C%5Cu5F97%5Cu4E00%5Cu770B%22%2Cs%3A%22false%22%7D)%3Bnew%20GRC"></script>
//
等待文档完成加载
$(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" ); }); });}
);
很简单，很优雅
摘自【 随想飞翔】 <script type="text/javascript" src="http://www.google.com/reader/ui/publisher.js"></script> <script type="text/javascript" src="http://www.google.com/reader/public/javascript/user/00697638153916680411/state/com.google/broadcast?n=5&callback=GRC_p(%7Bc%3A%22green%22%2Ct%3A%22%5Cu8FD9%5Cu4E9B%5Cu6587%5Cu7AE0%5Cu4E5F%5Cu503C%5Cu5F97%5Cu4E00%5Cu770B%22%2Cs%3A%22false%22%7D)%3Bnew%20GRC"></script>
再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.youkuaiyun.com/jiangjunshow
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
