js右侧悬浮框

浏览数：36 / 时间：2015年06月09日

示例：屏幕右侧悬浮框

原理：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>

js右侧悬浮框,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

js右侧悬浮框