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

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

作者:秋了秋 发表时间:2014年09月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;}

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

0
除非注明,文章均由 秋叶网络博客 发布,欢迎转载。
转载请注明本文地址:http://www.mizuiren.com/3405.html
目录: 网页特效 | 标签: 返回顶部特效, 网页特效, 火箭升空 | 19057次阅读