回到顶部火箭demo

来源：互联网发布：大数据公共服务平台编辑：程序博客网时间：2024/05/18 01:38

前台页面代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <link rel="stylesheet" type="text/css" href="index.css">    <script type="text/javascript" src="jquery.min.js"></script>    <script type="text/javascript" src="sucaijiayuan.js"></script></head><body>    <div style="display: none;" id="rocket-to-top">        <div style="opacity:0;display: block;" class="level-2"></div>        <div class="level-3"></div>    </div></body></html>

依赖jquery.js和sucaijiayuan.js，以及自定义css
index.css文件

*{list-style:none;border:0;}body{height:800px;}#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("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;}/*download by www.sucaijiayuan.com*/#rocket-to-top {    background: url("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;}

sucaijiayuan.js文件

$(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        })    }),    //download by www.sucaijiayuan.com    $(".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");    });});

图片文件
这里写图片描述

效果图

这里写图片描述

阅读全文

0 0