Javascript----实现火箭按钮网页置顶

Posted SunLike阿理旺旺

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Javascript----实现火箭按钮网页置顶相关的知识，希望对你有一定的参考价值。

1、代码

 

 <!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <!--
			火箭2.0版本(火箭的速度先快后慢,当body的scorllTop距离小于8%时,速度变快,并且火箭最终飞出顶部)
		-->
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    .web {
        height: 10000px;
        background: linear-gradient(#fff, #000);
    }

    .rocket {
        width: 149px;
        height: 249px;
        background: url(imgs/rocket_button_up.png) 0% 0%;
        position: fixed;
        top: 420px;
        right: 20px;
        cursor: pointer;
    }

    .rocket:hover {
        background-position: -100% 0;
    }
    </style>
    <div class="web">
    </div>
    <div class="rocket" title="点击回到顶部" id=\'rocket\'>
    </div>
    <script type="text/javascript">
    var rocketBtn = document.getElementById("rocket");
    var d1 = parseInt(getComputedStyle(rocketBtn, "position").getPropertyValue("top"));
    var d = d1;
    var s = 2;
    var interVal;
    var rocketSpeed = 10;

    rocketBtn.addEventListener("click", function() {

    	var scrollPosition = window.document.body.scrollTop;

    	console.log(scrollPosition);
     
        interVal = setInterval(function() {
            if(d>-250){
        	   // console.log(d+"/"+(d1+500)+"="+d/(d1+500));
	            if(d/(d1+250)<0.3){
	            	rocketSpeed = 100;
	            }
            }
            if (d >-400) {
                if (s != 6) {
                    s++;
                } else {
                    s = 2;
                }
                rocketBtn.setAttribute("style", "top:" + d);
                d -= rocketSpeed;
                if(rocketSpeed>4){
                    rocketSpeed-=0.2;
                }
                //console.log("d1:" + d1 + "-->d:" + d);
                rocketBtn.style.backgroundPosition = (-100 * s) + "% 0";
                window.document.body.scrollTop -= 1000;
            } else {
                clearInterval(interVal);
            }
        }, 50)

    })
    </script>
</body>

</html>

　　

 

 

 

2、效果

 3、总结

 

以上是关于Javascript----实现火箭按钮网页置顶的主要内容，如果未能解决你的问题，请参考以下文章

按钮实现页面置顶的方法

JavaScript DOM操作案例点击按钮实现网页开关灯

中秋快乐如何用three.js实现我的太空遐想3D网页

如何通过JavaScript或者jQuery异步实现获取远程网页源码，例如按下按钮就显示某网站的源

Mysql数据库实现的简单置顶

定时器小案例：模拟火箭发射按钮