首页 > 代码库 > Javascript----实现火箭按钮网页置顶
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----实现火箭按钮网页置顶
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。