网页“火箭升空”特效返回顶部
作者：秋了秋 发表时间：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("//img.netblog.site/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("//img.netblog.site/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;}
注：里面的图片地址可自行修改。
3
文章作者： “秋了秋”个人博客，本站鼓励原创。
转载请注明本文地址：http://netblog.cn/blog/3405.html