JS运动带有缓冲运动的悬浮框

最新推荐文章于 2022-07-12 13:11:05 发布

原创最新推荐文章于 2022-07-12 13:11:05 发布 · 685 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JS运动应用

js代码专栏收录该内容

8 篇文章

订阅专栏

JS运动应用悬浮框的制作，在一些网站中我们会发现有一种出现在右下方的广告栏，它会随着拖动条的移动来移动，下面就是小编写的关于这个东西制作的原理图

小编在这里将先告诉大家缓冲运动的理念，然后我们在制作悬浮框的时候可能经常会出现悬浮框一闪一闪卡顿的情况，我们如果利用缓冲运动就可以轻松解决这样闪的问题。下面的代码是缓冲运动的原理

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8"> 
		<title>缓冲运动</title>
		<style type="text/css">
		/*向左移动的css*/
			#div1{width: 100px; height: 100px; background: red; position: absolute;left: 600px; top: 50px;}
			/*#div1{width: 100px; height: 100px; background: red; position: absolute;left: 0px; top: 50px;}向有移动的css*/
			#div2{width: 1px; height: 300px; left: 300px; top: 0px; background: black; position: absolute;}
			/*会发现div1差了一块并没有到达300像素因为走到最后speed变为零点几，像素不可能变为小数，299.9px计算机会认为是299px*/
		</style>
		<script>
			function startMove() {
				var oDiv = document.getElementById('div1');
				
				setInterval(function () {
					var speed = (300 - oDiv.offsetLeft)/10;
					
//					speed = Math.ceil(speed);//根据上面的注释所以这里应该采用向上取整
					//但是如果div向左移动呢？应该想到用floor
					//根据上面的注释说明可以这样改
					speed = speed>0?Math.ceil(speed):Math.floor(speed);
					oDiv.style.left = oDiv.offsetLeft + speed + 'px';
				},30)
			}
		</script>
	</head>
	<body>
		<input type="button"  value="开始运动" onclick="startMove()"/>
		<div id="div1">	</div>
		<div id="div2"></div>
		<!--div2作为一个标杆-->
	</body>
</html>

在这里插入图片描述
下面是带有缓冲运动悬浮框的代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>悬浮框</title>
		<style type="text/css">
			#div1{width: 100px; height: 150px; background: lightslategray; position: absolute;right: 0; bottom: 0;}
		</style>
		<script type="text/javascript">
			window.onscroll=function () {
				var oDiv = document.getElementById('div1');
				var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
				
//				oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight+scrollTop + 'px';这是在未使用缓冲运动的框架
//使用缓冲运动的框架后
                startMove(document.documentElement.clientHeight - oDiv.offsetHeight+scrollTop);
			}
			
			var timer = null;
			
			function startMove(iTarget) {
				var oDiv = document.getElementById('div1');
				
				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 style="height: 2000px;">
		<div id="div1">
			
		</div>
	</body>
</html>

在这里插入图片描述