顶部下滑大图回弹效果(jQuery)

网站刷新时,顶部图片会下滑,停留一段时间后弹回去消失。
效果原理:
使用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>

如有问题欢迎交流。

如转载请注明出处,谢谢!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,713评论 1 92
  • display: none; 与 visibility: hidden; 的区别 联系:它们都能让元素不可见 区别...
    纹小艾阅读 5,858评论 0 1
  • 隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性。但是通过css...
    老夫撩发少年狂阅读 4,821评论 0 2
  • 【姓名】杜维鸽 【导师】王玉印 袁文魁 【导图解说】 中心图是一只梅花鹿,取其优雅和自信的形象,它是一个跑动的姿...
    杜维鸽阅读 3,332评论 0 0
  • 陈小冠在6周岁整的前一天晚上在自己的床上完成了独立睡觉。具体时间是2017年4月6日晚。到今天为止已经5个夜晚。 ...
    木木sani阅读 1,220评论 0 0

友情链接更多精彩内容