jQuery火箭上升回到顶部效果

模板网 2014-11-17

jQuery火箭上升回到顶部效果，jQuery模拟火箭升空的效果使网页回到顶部，效果逼真。

代码打包下载：jQuery火箭上升回到顶部效果

效果截图：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>jQuery火箭上升回到顶部效果</title>
<style>
body {height:2500px;}

#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(/data1/20141117/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(/data1/20141117/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;
}
</style>
<script src="http://libs.baidu.com/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
$(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");
	});
});
</script>
</head>
<body>
<p>请将滚动条向下拖动</p>
<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>

相关文章

  1. jquery折叠效果

    jquery折叠效果，图片折叠收缩，效果非常棒！ 代码打包下载: jquery折叠效果 效果图:

  2. jQuery日期选择器插件jquery.date_input.js

    官网： http://jonathanleighton.com/projects/date-input/ 下载： http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js http://github.com/jonleighton/date_input/raw/master/jquery.date_input.js http://github.com/jonleighton/date_inpu

  3. 很棒的网站底部导航条效果

    很棒的网站底部导航条效果，访客输入咨询信息点击发送按钮时可以向商务通传递访客输入的信息。 打包下载： 很棒的网站底部导航条效果 效果截图：

  4. Jquery幻灯片特效jquery.KinSlideshow-1.1.js

    KinSlideshow无缝滑动幻灯片jquery特效代码Jquery幻灯片特效jquery.KinSlideshow-1.1.js 兼容IE6/IE7/IE8/IE9,FireFox,Chrome*,Opera的 jQuery. KinSlideshow幻灯片插件，功能很多 ，基本能满足你在网页上使用幻灯片(焦点图)效果。 演示页面: 演示一 演示二

  5. 医疗网站常用的左右滑动Banner效果_jquery插件

    医疗网站常用的左右滑动Banner效果_jquery插件，使用简单。 在线演示 使用方法： 1.在网页中引入一下代码： 复制代码 代码如下: link href=css/slide.css rel=stylesheet type=text/css / script type=text/javascript src=js/jquery.js/script script type=

随机推荐

  1. jquery折叠效果

    jquery折叠效果，图片折叠收缩，效果非常棒！ 代码打包下载: jquery折叠效果 效果图:

  2. jQuery日期选择器插件jquery.date_input.js

    官网： http://jonathanleighton.com/projects/date-input/ 下载： http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js http://github.com/jonleighton/date_input/raw/master/jquery.date_input.js http://github.com/jonleighton/date_inpu

  3. 很棒的网站底部导航条效果

    很棒的网站底部导航条效果，访客输入咨询信息点击发送按钮时可以向商务通传递访客输入的信息。 打包下载： 很棒的网站底部导航条效果 效果截图：

  4. Jquery幻灯片特效jquery.KinSlideshow-1.1.js

    KinSlideshow无缝滑动幻灯片jquery特效代码Jquery幻灯片特效jquery.KinSlideshow-1.1.js 兼容IE6/IE7/IE8/IE9,FireFox,Chrome*,Opera的 jQuery. KinSlideshow幻灯片插件，功能很多 ，基本能满足你在网页上使用幻灯片(焦点图)效果。 演示页面: 演示一 演示二

  5. 医疗网站常用的左右滑动Banner效果_jquery插件

    医疗网站常用的左右滑动Banner效果_jquery插件，使用简单。 在线演示 使用方法： 1.在网页中引入一下代码： 复制代码 代码如下: link href=css/slide.css rel=stylesheet type=text/css / script type=text/javascript src=js/jquery.js/script script type=