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 {
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、总结