当前位置:秋叶网络博客 网页特效 ◊ 网页“火箭升空”特效返回顶部

网页“火箭升空”特效返回顶部

作者:秋叶 发表时间:2014年9月27日

一段很简单的js特效,告别枯燥的返回按钮。这是一款动态返回顶部的按钮,点击后会播放真实的火箭升空的动画特效,并在网页顶部消失。

返回顶部特效

首先在网页的<body></body>之间加入这段代码:

<!-- rocket -->
<div style="display: none;" id="rocket-to-top">
<div style="opacity:0;display: block;" class="level-2"></div>
<div class="level-3"></div>

然后在网页的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})}),
$(".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");});});

剩下的就是css了,在网页的css文件中加入以下代码:

/*****火箭升空返回顶部*****/
#rocket-to-top div {left: 0;margin:0 auto;overflow: hidden;padding: 0;position: absolute;top: 0;width: 149px;}
#rocket-to-top .level-2 {
background: url("http://img.mizuiren.com/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("http://img.mizuiren.com/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: 90%;width: 149px;z-index: 11;}

注:里面的图片地址可自行修改。

目录: 网页特效 | 标签: , , | 19146次阅读