JS-缓冲运动：菜单栏型悬浮框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>缓冲运动2</title>
<style type="text/css">
body{
height: 2000px;
}
.div {
width: 100px;
height: 100px;
background-color: darkslateblue;
position: absolute;
right: 0;
bottom: 0;
cursor: pointer;
}
</style>
<script type="text/javascript">
window.onscroll= function(){
//1,给浏览器的滚动添加事件，onscollTop事件
var oDiv = document.getElementById('div');
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
// oDiv.style.top = document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop+'px';
//可视区域的高度减掉物体高度再加上向上滚动的高度
starMove(document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop)
};
var timer = null;
function starMove(iTarget){
var oDiv = document.getElementById('div');
clearInterval(timer);
timer = setInterval(function(){
var speed = (iTarget-oDiv.offsetTop)/4;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(oDiv.offsetTop==iTarget){
clearInterval(timer)
}else{
oDiv.style.top = oDiv.offsetTop+speed+'px';
}
},30)
}
</script>
</head>
<body>
<div class="div" id="div"></div>
</body>
</html>课程链接：智能社的开发教程：https://ke.qq.com/webcourse/index.html#course_id=152997&term_id=100174752&taid=766913655494053&vid=v14127nxshc
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2017-02-15 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
