js右侧悬浮框
示例：屏幕右侧悬浮框
原理：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:0; bottom:0; 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);
