js运动技术--右侧悬浮框！

最新推荐文章于 2024-07-02 12:11:37 发布

柏油

最新推荐文章于 2024-07-02 12:11:37 发布

阅读量2.9k

点赞数

分类专栏： # JAVA WEB

本文链接：https://blog.csdn.net/ldw201510803006/article/details/75012706

版权

JAVA WEB 专栏收录该内容

59 篇文章 3 订阅

订阅专栏

目的让一个div悬浮框始终悬浮于页面右下脚：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#div1{width: 100px;height: 150px;background: red;position: absolute;
			bottom: 0px;right: 0px;}
		</style>
		<script>
			window.onscroll = function(){
				var oDiv = document.getElementById("div1");
				//scrollTop 起始位置到末位置的滑动高度
				var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滑动宽度/高度
				//documentElement.clientHeight 页面可视区宽高
				//oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop + 'px';		
				startMove(document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop);
				//startMove(oDiv.offsetTop + scrollTop);//为什么不行?
			}
			
			var timer = null;
			function startMove (iTarget){
				var oDiv = document.getElementById("div1");
				clearInterval(timer);
                timer = setInterval(function(){
				var speed = (iTarget - oDiv.offsetTop)/20;
				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 style="height: 2000px;">
		<div id = "div1">
		</div>
	</body>
</html>

2、对联悬浮框：

document.documentElement.clientHeight - oDiv.offsetHeight//处以2即可，可能出现一个问题就是，结果为小数，这样就造成在中间位置不断抖动的情况；所以可通过parseInt处理

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#div1{width: 100px;height: 150px;background: red;position: absolute;
			bottom: 0px;right: 0px;}
		</style>
		<script>
			window.onscroll = function(){
				var oDiv = document.getElementById("div1");
				var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滑动宽度/高度	
				startMove(parseInt(document.documentElement.clientHeight - oDiv.offsetHeight)/2 + scrollTop);
			}
			
			var timer = null;
			function startMove (iTarget){
				var oDiv = document.getElementById("div1");
				var oTx = document.getElementById("txt1");
				
				clearInterval(timer);
                timer = setInterval(function(){
				var speed = (iTarget - oDiv.offsetTop)/20;
				speed = speed>0?Math.ceil(speed):Math.floor(speed);         
				
				if(oDiv.offsetTop == iTarget){
					clearInterval(timer);
				}
				else{
					oDiv.style.top = oDiv.offsetTop + speed + 'px';
					oTx.value = oDiv.style.top;
				}
                },30);
				
				
			}
		</script>
	</head>
	<body style="height: 2000px;">
		<input id = "txt1" type="text" style="position: fixed;top: 0px;right: 0px;"/>
		<div id = "div1">
		</div>
	</body>
</html>