jQuery火箭上升回到顶部效果

模板网 2014-11-17

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

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

效果截图：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
  5. <title>jQuery火箭上升回到顶部效果</title>
  6. <style>
  7. body {height:2500px;}
  9. #rocket-to-top div {
  10.     left: 0;
  11.     margin: 0;
  12.     overflow: hidden;
  13.     padding: 0;
  14.     position: absolute;
  15.     top: 0;
  16.     width: 149px;
  17. }
  18. #rocket-to-top .level-2 {
  19.     background: url(/data1/20141117/rocket_button_up.png) no-repeat scroll -149px 0 transparent;
  20.     display: none;
  21.     height: 250px;
  22.     opacity: 0;
  23.     z-index: 1;
  24. }
  25. #rocket-to-top .level-3 {
  26.     background: none repeat scroll 0 0 transparent;
  27.     cursor: pointer;
  28.     display: block;
  29.     height: 150px;
  30.     z-index: 2;
  31. }
  32. #rocket-to-top {
  33.     background: url(/data1/20141117/rocket_button_up.png) no-repeat scroll 0 0 transparent;
  34.     cursor: default;
  35.     display: block;
  36.     height: 250px;
  37.     margin: -125px 0 0;
  38.     overflow: hidden;
  39.     padding: 0;
  40.     position: fixed;
  41.     right: 0;
  42.     top: 80%;
  43.     width: 149px;
  44.     z-index: 11;
  45. }
  46. </style>
  47. <script src="http://libs.baidu.com/jquery/1.8.0/jquery.min.js"></script>
  48. <script type="text/javascript">
  49. $(function() {
  50. 	var e = $("#rocket-to-top"),
  51. 	t = $(document).scrollTop(),
  52. 	n,
  53. 	r,
  54. 	i = !0;
  55. 	$(window).scroll(function() {
  56. 		var t = $(document).scrollTop();
  57. 		t == 0 ? e.css("background-position") == "0px 0px" ? e.fadeOut("slow") : i && (i = !1, $(".level-2").css("opacity", 1), e.delay(100).animate({
  58. 			marginTop: "-1000px"
  59. 		},
  60. 		"normal",
  61. 		function() {
  62. 			e.css({
  63. 				"margin-top": "-125px",
  64. 				display: "none"
  65. 			}),
  66. 			i = !0
  67. 		})) : e.fadeIn("slow")
  68. 	}),
  69. 	e.hover(function() {
  70. 		$(".level-2").stop(!0).animate({
  71. 			opacity: 1
  72. 		})
  73. 	},
  74. 	function() {
  75. 		$(".level-2").stop(!0).animate({
  76. 			opacity: 0
  77. 		})
  78. 	}),
  79. 	$(".level-3").click(function() {
  80. 		function t() {
  81. 			var t = e.css("background-position");
  82. 			if (e.css("display") == "none" || i == 0) {
  83. 				clearInterval(n),
  84. 				e.css("background-position", "0px 0px");
  85. 				return
  86. 			}
  87. 			switch (t){
  88. 			case "0px 0px":
  89. 				e.css("background-position", "-298px 0px");
  90. 				break;
  91. 			case "-298px 0px":
  92. 				e.css("background-position", "-447px 0px");
  93. 				break;
  94. 			case "-447px 0px":
  95. 				e.css("background-position", "-596px 0px");
  96. 				break;
  97. 			case "-596px 0px":
  98. 				e.css("background-position", "-745px 0px");
  99. 				break;
  100. 			case "-745px 0px":
  101. 				e.css("background-position", "-298px 0px");
  102. 			}
  103. 		}
  104. 		if (!i) return;
  105. 		n = setInterval(t, 50),
  106. 		$("html,body").animate({scrollTop: 0},"slow");
  107. 	});
  108. });
  109. </script>
  110. </head>
  111. <body>
  112. <p>请将滚动条向下拖动</p>
  113. <div style="display: none;" id="rocket-to-top">
  114. 	<div style="opacity:0;display: block;" class="level-2"></div>
  115. 	<div class="level-3"></div>
  116. </div>
  117. </body>
  118. </html>

相关文章

  1. jquery折叠效果

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

  2. jQuery火箭上升回到顶部效果

    jQuery火箭上升回到顶部效果，jQuery模拟火箭升空的效果使网页回到顶部，效果逼真。 代码打包下载： jQuery火箭上升回到顶部效果 效果截图：

  3. 医疗网站常用的左右滑动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=

  4. jQuery实现的返回顶部功能

    jQuery实现的返回顶部功能

  5. jQuery集合多种过渡效果幻灯片插件jQuery Nivo Slider v2.5.1

    好吧一直有人抱怨js版本的焦点图过渡效果太单调，今天介绍的这款jQuery插件Nivo Slider，除了一般该有的参数设置外，最大的亮点就是其集成了16种(v2.5.1)过渡效果 ，再加上对CSS的调整，效果相信已经可以和很多Flash版本的焦点图相媲美了 插件同时还支持缩略

随机推荐

  1. jquery折叠效果

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

  2. jQuery火箭上升回到顶部效果

    jQuery火箭上升回到顶部效果，jQuery模拟火箭升空的效果使网页回到顶部，效果逼真。 代码打包下载： jQuery火箭上升回到顶部效果 效果截图：

  3. 医疗网站常用的左右滑动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=

  4. jQuery实现的返回顶部功能

    jQuery实现的返回顶部功能

  5. jQuery集合多种过渡效果幻灯片插件jQuery Nivo Slider v2.5.1

    好吧一直有人抱怨js版本的焦点图过渡效果太单调，今天介绍的这款jQuery插件Nivo Slider，除了一般该有的参数设置外，最大的亮点就是其集成了16种(v2.5.1)过渡效果 ，再加上对CSS的调整，效果相信已经可以和很多Flash版本的焦点图相媲美了 插件同时还支持缩略