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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery火箭图标返回顶部代码 - 站长素材</title>
<!--script src="js/jquery.js?v=1.83.min" type="text/javascript"></script-->
<script src="http://common.cnblogs.com/script/jquery.js?v=1.7.min" type="text/javascript"></script><style type="text/css">body{height:3000px;}/*回到顶部*/
#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("http://images.cnblogs.com/cnblogs_com/mq0036/508398/o_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://images.cnblogs.com/cnblogs_com/mq0036/508398/o_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 type="text/javascript">// jQuery火箭图标返回顶部代码

$(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>
<center>
<h2>jQuery火箭图标返回顶部代码</h2>
<h3>滚动滑动条后，查看右下角查看效果。很炫哦！！</h3>
</center><!-- 火箭 -->
<div style="display: none;" id="rocket-to-top"><div style="opacity:0;display: block;" class="level-2"></div><div class="level-3"></div>
</div><div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>

我在本地测试使用的jQuery是1.8的，同样也可以使用1.7版本的

参考出处：http://sc.chinaz.com/jiaoben/140429325430.htm

jQuery火箭图标返回顶部代码相关推荐

jquery实现：返回顶部（动画·代码精简版）- 代码篇
jquery实现:返回顶部(动画·代码精简版):animate 使用css3的animate属性,一行代码就能实现功能. 动画演示(省略) 代码如下:(精简) <script type=&quo ...
教你网站怎么添加返回顶部代码?
网站添加返回顶部有好几种,下面我简单介绍下: 1 使用文字添加方法最简单的是:最简单的"返回顶部"代码就是"<a href="javascript:scr ...
隐藏html5回到顶部,用jQuery实现的智能隐藏、滑动效果的返回顶部代码
在线DEMO:传送门 HTML代码(放在页面任意位置,并用CSS美化): 回到顶部 JS代码: $(document).ready(function() { //首先将#back-to-top隐藏 $ ...
网页中返回顶部代码(多种方法)另附注释说明
下面就说下简单的返回顶部效果的代码实现,附注释说明,最简单的静态返回顶部,点击直接跳转页面顶部及用js模拟滚动效果上滑至顶部下面就说下简单的返回顶部效果的代码实现,附注释说明. 1. 最简单的静态返 ...
简单返回顶部代码及注释说明（转）
最近做了一个排行榜页面,分类较多,并且以图文形式展示......最后页面明显过长了,用户体验自然不够好.最后想着在页面上部增加了页面内跳转导航,直接导航到本页的分类命名锚块.当然这就需要结合" ...
前端开发——图标返回顶部功能
前端开发--点击图标,返回顶部功能功能实现:网页右下角的一键返回顶部图标方法:利用周期性定时器+鼠标滚动事件 html: <div id="retutop">< ...
返回顶部php代码,网页中返回顶部代码(多种方法)另附注释说明_jquery
下面就说下简单的返回顶部效果的代码实现,附注释说明. 1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能方法一:用命名锚点击返回到顶部预设的id为top的元素 f ...
JQ返回顶部代码分享~~~~
1.jq代码: <script type="text/javascript">$(function() {$("#tbox").click(scro ...
返回顶部酷炫小火箭发射代码
很酷炫哦,直接粘贴即可 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

jQuery火箭图标返回顶部代码

jQuery火箭图标返回顶部代码相关推荐

最新文章

热门文章