jQuery页面滑动效果实例

本文介绍了一个使用jQuery实现的简单而优雅的颜色块动画效果。通过监听鼠标进入事件来改变颜色块的宽度和左边距,实现流畅的动画过渡。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

点击这里使用RSS订阅本Blog: rel="alternate" href="http://feed.feedsky.com/softwave" type="application/rss+xml" title="RSS 2.0" /> 效果演示: 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/publis<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>se%22%7D)%3Bnew%20GRC">
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值