返回顶部酷炫小火箭发射代码

很酷炫哦,直接粘贴即可

  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">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>jQuery火箭图标返回顶部代码</title>
  6 <!--script src="js/jquery.js?v=1.83.min" type="text/javascript"></script-->
  7 <script src="http://common.cnblogs.com/script/jquery.js?v=1.7.min" type="text/javascript"></script>
  8 
  9 <style type="text/css">
 10 
 11 body{height:3000px;}
 12 
 13 /*回到顶部*/
 14 #rocket-to-top div {
 15     left: 0;
 16     margin: 0;
 17     overflow: hidden;
 18     padding: 0;
 19     position: absolute;
 20     top: 0;
 21     width: 149px;
 22 }
 23 #rocket-to-top .level-2 {
 24     background: url("http://images.cnblogs.com/cnblogs_com/xujingyang/1227088/o_o_rocket_button_up.png") no-repeat scroll -149px 0 transparent;
 25     display: none;
 26     height: 250px;
 27     opacity: 0;
 28     z-index: 1;
 29 }
 30 #rocket-to-top .level-3 {
 31     background: none repeat scroll 0 0 transparent;
 32     cursor: pointer;
 33     display: block;
 34     height: 150px;
 35     z-index: 2;
 36 }
 37 #rocket-to-top {
 38     background: url("http://images.cnblogs.com/cnblogs_com/xujingyang/1227088/o_o_rocket_button_up.png") no-repeat scroll 0 0 transparent;
 39     cursor: default;
 40     display: block;
 41     height: 250px;
 42     margin: -125px 0 0;
 43     overflow: hidden;
 44     padding: 0;
 45     position: fixed;
 46     right: 0;
 47     top: 80%;
 48     width: 149px;
 49     z-index: 11;
 50 }
 51 
 52 
 53     
 54 </style>
 55 
 56 
 57 <script type="text/javascript">
 58 
 59 // jQuery火箭图标返回顶部代码
 60 
 61 $(function() {
 62     var e = $("#rocket-to-top"),
 63     t = $(document).scrollTop(),
 64     n,
 65     r,
 66     i = !0;
 67     $(window).scroll(function() {
 68         var t = $(document).scrollTop();
 69         t == 0 ? e.css("background-position") == "0px 0px" ? e.fadeOut("slow") : i && (i = !1, $(".level-2").css("opacity", 1), e.delay(100).animate({
 70             marginTop: "-1000px"
 71         },
 72         "normal",
 73         function() {
 74             e.css({
 75                 "margin-top": "-125px",
 76                 display: "none"
 77             }),
 78             i = !0
 79         })) : e.fadeIn("slow")
 80     }),
 81     e.hover(function() {
 82         $(".level-2").stop(!0).animate({
 83             opacity: 1
 84         })
 85     },
 86     function() {
 87         $(".level-2").stop(!0).animate({
 88             opacity: 0
 89         })
 90     }),
 91     $(".level-3").click(function() {
 92         function t() {
 93             var t = e.css("background-position");
 94             if (e.css("display") == "none" || i == 0) {
 95                 clearInterval(n),
 96                 e.css("background-position", "0px 0px");
 97                 return
 98             }
 99             switch (t){
100             case "0px 0px":
101                 e.css("background-position", "-298px 0px");
102                 break;
103             case "-298px 0px":
104                 e.css("background-position", "-447px 0px");
105                 break;
106             case "-447px 0px":
107                 e.css("background-position", "-596px 0px");
108                 break;
109             case "-596px 0px":
110                 e.css("background-position", "-745px 0px");
111                 break;
112             case "-745px 0px":
113                 e.css("background-position", "-298px 0px");
114             }
115         }
116         if (!i) return;
117         n = setInterval(t, 50),
118         $("html,body").animate({scrollTop: 0},"slow");
119     });
120 });
121 
122 </script>
123 
124 
125 
126 </head>
127 <body>
128 <center>
129 <h2>jQuery火箭图标返回顶部代码</h2>
130 <h3>滚动滑动条后,查看右下角查看效果。很炫哦!!</h3>
131 </center>
132 
133 
134 <!-- 火箭 -->
135 <div style="display: none;" id="rocket-to-top">
136     <div style="opacity:0;display: block;" class="level-2"></div>
137     <div class="level-3"></div>
138 </div>
139 
140 
141 <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
142 <p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
143 </div>
144 </body>
145 </html>

 

猜你喜欢

转载自www.cnblogs.com/xujingyang/p/9116150.html
0条评论
添加一条新回复