rocket.html 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. <style>
  2. #rocket-to-top div {
  3. left:0;
  4. margin:0;
  5. overflow:hidden;
  6. padding:0;
  7. position:absolute;
  8. top:0;
  9. width:88px;
  10. background: red;
  11. }
  12. #rocket-to-top .level-2 {
  13. background:url("__ADDONROOT__/images/rocket_button_up.png") no-repeat scroll -88px 0 transparent;
  14. display:none;
  15. height:200px;
  16. opacity:0;
  17. z-index:1;
  18. }
  19. #rocket-to-top .level-3 {
  20. background:none repeat scroll 0 0 transparent;
  21. cursor:pointer;
  22. display:block;
  23. height:150px;
  24. z-index:2;
  25. }
  26. #rocket-to-top {
  27. background:url("__ADDONROOT__/images/rocket_button_up.png") no-repeat scroll 0 0 transparent;
  28. cursor:default;
  29. display:block;
  30. height:200px;
  31. margin:-25px 0 0;
  32. overflow:hidden;
  33. padding:0;
  34. position:fixed;
  35. right:0;
  36. top:70%;
  37. width:88px;
  38. z-index:11;
  39. }
  40. @media (max-width: 768px) {
  41. .returntop {
  42. display: none;
  43. }
  44. }
  45. </style>
  46. <div class="returntop">
  47. <div style="display:none;" id="rocket-to-top">
  48. <div style="opacity:0;display:block;" class="level-2"></div>
  49. <div class="level-3"></div>
  50. </div>
  51. <script>
  52. $(function() {
  53. var e = $("#rocket-to-top"),
  54. t = $(document).scrollTop(),
  55. n,
  56. r,
  57. i = !0;
  58. $(window).scroll(function() {
  59. var t = $(document).scrollTop();
  60. t == 0 ? e.css("background-position") == "0px 0px" ? e.fadeOut("slow") : i && (i = !1, $(".level-2").css("opacity", 1), e.delay(100).animate({
  61. marginTop: "-1000px"
  62. },
  63. "normal",
  64. function() {
  65. e.css({
  66. "margin-top": "-25px",
  67. display: "none"
  68. }),
  69. i = !0
  70. })) : e.fadeIn("slow")
  71. }),
  72. e.hover(function() {
  73. $(".level-2").stop(!0).animate({
  74. opacity: 1
  75. })
  76. },
  77. function() {
  78. $(".level-2").stop(!0).animate({
  79. opacity: 0
  80. })
  81. }),
  82. $(".level-3").click(function() {
  83. function t() {
  84. var t = e.css("background-position");
  85. if (e.css("display") == "none" || i == 0) {
  86. clearInterval(n),
  87. e.css("background-position", "0px 0px");
  88. e.css("height", "200px;");
  89. return
  90. }
  91. switch (t){
  92. case "0px 0px":
  93. e.css("background-position", "-176px 0px");
  94. break;
  95. case "-176px 0px":
  96. e.css("background-position", "-264px 0px");
  97. break;
  98. case "-264px 0px":
  99. e.css("background-position", "-352px 0px");
  100. break;
  101. case "-352px 0px":
  102. e.css("background-position", "-440px 0px");
  103. break;
  104. case "-440px 0px":
  105. e.css("background-position", "-176px 0px");
  106. }
  107. }
  108. if (!i) return;
  109. n = setInterval(t, 50),
  110. $("html,body").animate({scrollTop: 0},"slow");
  111. });
  112. });
  113. </script>
  114. </div>