網站刷新時,頂部圖片會下滑,停留一段時間后彈回去消失。
效果原理:
使用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>

如有問題歡迎交流。

如轉載請註明出處,謝謝!