一个火箭滑动到页面顶部插件

最新推荐文章于 2020-05-13 15:38:01 发布

samete

最新推荐文章于 2020-05-13 15:38:01 发布

阅读量580

点赞数

分类专栏： js 插件

本文链接：https://blog.csdn.net/samete/article/details/50804437

版权

js 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

插件

6 篇文章 0 订阅

订阅专栏

<img src="https://img-blog.csdn.net/20160304175214214" alt="" /><img src="https://img-blog.csdn.net/20160304175214214" alt="" /><img src="https://img-blog.csdn.net/20160304175240808" alt="" />$(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() {
		e.css("background-position", "-176px 0px");
		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");
//			}
			switch (t){
			case "0px 0px":
				e.css("background-position", "-176px 0px");
				break;
			case "-176px 0px":
				e.css("background-position", "-350px 0px");
				break;
			case "-350px 0px":
				e.css("background-position", "-350px 0px");
			}
		}
		if (!i) return;
		n = setInterval(t, 500),
		$("html,body").animate({scrollTop: 0},"slow");
	});
});

 #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("../../../img/front/frontHome/index/rocket_run.png") no-repeat scroll -149px 0 transparent;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="../image/index/rocket_run.png"); 
    background:none;

    background-position: -149px 0;
    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("../../../img/front/frontHome/index/rocket_button_up.png") no-repeat scroll 0 0 transparent;*/
    /*background: url("../../../img/front/frontHome/index/icon-huojian.png") no-repeat scroll 0 0 transparent;*/
    background: url("../../../img/front/frontHome/index/rocket-run.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;
}
ul#bcty365_nav{padding-left:50px; margin-bottom:10px; border-bottom:2px solid #ccc; overflow:hidden; zoom:1;}
ul#bcty365_nav li{float:left; display:inline; margin:10px;}
ul#bcty365_nav li a{display:block;color:#000000; font-size:16px;}
ul#bcty365_nav li a,#wimoban_p,#wimoban_p a{ font-family:"Microsoft YaHei";}
ul#bcty365_nav li a:hover,#wimoban_p a:hover{color:red;}

<div style="display: none;" id="rocket-to-top">
        <div style="opacity:0;display: block;" class="level-2"></div>
        <div class="level-3"></div>
    </div>