顶部下滑大图回弹效果（jQuery）

作者: 被时光移动的城 | 来源:发表于2017-05-22 21:59 被阅读390次

顶部下滑大图回弹效果（jQuery）
jQuery学习笔记（二）-效果之滑动/动画
Android ListView实现阻尼回弹效果并去除边缘阴影
Dialog
类似淘宝首页ScrollView顶部区域滑动渐变
jQuery返回顶部和在线客服网站侧边栏
tableView实现第一个cell半遮挡tableHeader
jQuery之加载当前年份的前5年和后5年
2019-05-14 RecyclerView设置Padding
2018-11-01 使用jQuery实现Tab选项卡

网站刷新时，顶部图片会下滑，停留一段时间后弹回去消失。
效果原理：
使用margin-top属性，使上面图margin-top为负，隐藏。页面刷新时，利用animate效果将margin-top值改为0。停留一段事件delay（3000）.animate(...)将margin-top值再变为负值，隐藏。
delay()一般写在运动之前，表示后面的运动延迟多久执行。
效果图：

image.png

代码（本文使用的jQuery版本是1.11.3，在低版本IE及W3C浏览器中效果相同）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            img{
                margin: 0 auto;
                display: block;
            }
            #top{
                margin-top: -520px;
            }
        </style>
        <script type="text/javascript" src="jquery.min.js">
            
        </script>
        <script type="text/javascript">
            $(function(){
                $("#top").animate({'margin-top':'0px'},3000,function(){
//                  delay()一般写在运动之前，表示后面的运动延迟多久执行。
                    $("#top").delay(3000).animate({'margin-top':'-520px'},2000);
                })
            })
        </script>
    </head>
    <body>
        ![](c.jpg)
        ![](tm.png)
    </body>
</html>

如有问题欢迎交流。

如转载请注明出处，谢谢！