阅读 70

jquery 火箭升空效果

图片素材:rocket_button_up.png


/* 火箭升空返回顶部 */
#rocket-to-top div {
    left:0;
    margin:0;
    overflow:hidden;
    padding:0;
    position:absolute;
    top:0;
    width:149px;
}
#rocket-to-top .level-2 {
    background:url("../images/rocket_button_up.png") no-repeat scroll -149px 0 transparent;
    display:none;
    height:250px;
    opacity:0;
    z-index:1;
}
#rocket-to-top .level-3 {
    background:none repeat scroll 0 0 transparent;
    cursor:pointer;
    display:block;
    height:150px;
    z-index:2;
}
#rocket-to-top {
    background:url("../images/rocket_button_up.png") no-repeat scroll 0 0 transparent;
    cursor:default;
    display:block;
    height:250px;
    margin:-125px 0 0;
    overflow:hidden;
    padding:0;
    position:fixed;
    right:0;
    top:80%;
    width:149px;
    z-index:11;
}
$(function () {
    var e = $("#rocket-to-top"),
        t = $(document).scrollTop(),
        n,
        r,
        i = !0;
    $(window).scroll(function () {
            var t = $(document).scrollTop();
            t == 0 ? e.css("background-position") == "0px 0px" ? e.fadeOut("slow") : i && (i = !1,
                $(".level-2").css("opacity", 1), e.delay(100).animate({
                        marginTop: "-1000px"
                    },
                    "normal",
                    function () {
                        e.css({
                                "margin-top": "-125px",
                                display: "none"
                            }),
                            i = !0
                    })) : e.fadeIn("slow")
        }),
        e.hover(function () {
                $(".level-2").stop(!0).animate({
                    opacity: 1
                })
            },
            function () {
                $(".level-2").stop(!0).animate({
                    opacity: 0
                })
            }),
        $(".level-3").click(function () {
            function t() {
                var t = e.css("background-position");
                if (e.css("display") == "none" || i == 0) {
                    clearInterval(n),
                        e.css("background-position", "0px 0px");
                    return
                }
                switch (t) {
                    case "0px 0px":
                        e.css("background-position", "-298px 0px");
                        break;
                    case "-298px 0px":
                        e.css("background-position", "-447px 0px");
                        break;
                    case "-447px 0px":
                        e.css("background-position", "-596px 0px");
                        break;
                    case "-596px 0px":
                        e.css("background-position", "-745px 0px");
                        break;
                    case "-745px 0px":
                        e.css("background-position", "-298px 0px");
                }
            }
            if (!i) return;
            n = setInterval(t, 50),
                $("html,body").animate({
                    scrollTop: 0
                }, "slow");
        });
});

原文:https://www.cnblogs.com/cdnotes/p/14953061.html

文章分类
代码人生
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐