示例:屏幕右侧悬浮框

原理:oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop + "px";

知识点:

浏览器窗体的高度

document.documentElement.clientHeight

浏览器滚动的高度

var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

html部分

<body style=" height:1600px;">
<div id="div1"></div>
</body> #div1 { position:absolute; right:; bottom:; width:100px; height:150px; background:green;}

js部分

<script>

window.onscroll = function(){
var oDiv = document.getElementById("div1");
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; //oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop + "px";
oDiv.style.top = startMove(document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop);
} var timer = null;
function startMove(iTarget){
clearInterval(timer); timer = setInterval(function(){
var oDiv = document.getElementById("div1");
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>

  

同上面这个悬浮框,可心改成另一个示例:对联悬浮框

示例:对联悬浮框

原理:

iTarget = (document.documentElement.clientHeight - oDiv.offsetHeight)/2 + scrollTop;

潜在问题:

对联一直在不停的抖动

检测分析:

1,打印出这个div 的offsetTop,发现它的值始终在两个相关1像素的值之间跳动

2,再打印iTarget发现它是800.5

原因:iTarget不是一个整数,造成“对联”不停的抖动

解决:

iTarget = parseInt((document.documentElement.clientHeight - oDiv.offsetHeight)/2 + scrollTop);

05-11 17:25