jQuery页面滑动效果实例

点击这里使用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>