jQuery火箭上升回到顶部效果
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>相关文章
- 医疗网站常用的左右滑动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=
- jQuery实现的返回顶部功能
jQuery实现的返回顶部功能
- 调用百度CDN提供的jQuery库来加速网站
CDN公共库是指将常用的JS库存放在CDN节点，以方便广大开发者直接调用。与将JS库存放在服务器单机上相比，CDN公共库更加稳定、高速。 百度公共CDN为您的应用程序提供稳定、可靠、高速的服务，包含全球所有最流行的开源JavaScript库。 使用方法: 加载JS库，复
- jQuery集合多种过渡效果幻灯片插件jQuery Nivo Slider v2.5.1
好吧一直有人抱怨js版本的焦点图过渡效果太单调，今天介绍的这款jQuery插件Nivo Slider，除了一般该有的参数设置外，最大的亮点就是其集成了16种(v2.5.1)过渡效果 ，再加上对CSS的调整，效果相信已经可以和很多Flash版本的焦点图相媲美了 插件同时还支持缩略
- jquery折叠效果
jquery折叠效果，图片折叠收缩，效果非常棒！ 代码打包下载: jquery折叠效果 效果图:
随机推荐
- 医疗网站常用的左右滑动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=
- jQuery实现的返回顶部功能
jQuery实现的返回顶部功能
- 调用百度CDN提供的jQuery库来加速网站
CDN公共库是指将常用的JS库存放在CDN节点，以方便广大开发者直接调用。与将JS库存放在服务器单机上相比，CDN公共库更加稳定、高速。 百度公共CDN为您的应用程序提供稳定、可靠、高速的服务，包含全球所有最流行的开源JavaScript库。 使用方法: 加载JS库，复
- jQuery集合多种过渡效果幻灯片插件jQuery Nivo Slider v2.5.1
好吧一直有人抱怨js版本的焦点图过渡效果太单调，今天介绍的这款jQuery插件Nivo Slider，除了一般该有的参数设置外，最大的亮点就是其集成了16种(v2.5.1)过渡效果 ，再加上对CSS的调整，效果相信已经可以和很多Flash版本的焦点图相媲美了 插件同时还支持缩略
- jquery折叠效果
jquery折叠效果，图片折叠收缩，效果非常棒！ 代码打包下载: jquery折叠效果 效果图: