<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
#div1{
width: 40px;
height: 40px;
background-color: red;
position: absolute;
right: 0px;
}
</style>
<script>
window,onload = function(){
var oDiv = document.getElementById("div1");
var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var iH = parseInt(scrollTop + (windowHeight - oDiv.offsetHeight) / 2);
startMove(iH);
}
window.onscroll = function(){
var oDiv = document.getElementById("div1");
var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var iH = parseInt(scrollTop + (windowHeight - oDiv.offsetHeight) / 2);
startMove(iH);
}
window.onresize = function(){
var oDiv = document.getElementById("div1");
var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var iH = parseInt(scrollTop + (windowHeight - oDiv.offsetHeight) / 2);
startMove(iH);
}
var timer = null;
function startMove(iTarget){
var oDiv = document.getElementById("div1");
clearInterval(timer);
timer = setInterval(function(){
var speed = (iTarget - oDiv.offsetTop) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(oDiv.offsetTop == iTarget){
clearInterval(timer);
}else{
oDiv.style.top = oDiv.offsetTop + speed + 'px';
}
}, 60);
}
</script>
</head>
<body style="height:3000px; ">
<div id = 'div1'></div>
</body>
</html>
【JavaScript】缓冲菜单
最新推荐文章于 2024-05-28 11:44:38 发布