用缓冲运动框架实现对联特效

最新推荐文章于 2022-01-22 09:45:47 发布

DB-Ruan

最新推荐文章于 2022-01-22 09:45:47 发布

阅读量439

点赞数

分类专栏：技术日志 JavaScript css

本文链接：https://blog.csdn.net/feizhoujeep/article/details/38781911

版权

JavaScript 同时被 3 个专栏收录

25 篇文章 0 订阅

订阅专栏

技术日志

23 篇文章 0 订阅

订阅专栏

css

6 篇文章 0 订阅

订阅专栏

核心思路：

1. 用HTML和CSS写出这个DIV，position属性设置为absolute，给right值为0，top值不给。用window.οnlοad=function(){oDiv.style.top=(document.documentElement.clientWidth-oDiv.offsetHeight)/2}得到右边对联的初始位置。

2. 用window.οnscrοll=function(){}开启定时器，运动缓冲运动模型。

3. 核心运动思路。元素块由原来的高度移动到新到高度（target）。target的值：scrollTop+(clientHeight-oDiv.offsetHeight)/2。

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>用缓冲运动来做春联</title>
		<meta charset="utf-8"/>
		<style>
			#test{width:150px; height:300px; background:red; position:absolute; right:0;}
		</style>
		<script>
			var timer=null;
			var speed;
			window.οnlοad=function(){
				oDiv=document.getElementById("test");
				oDiv.style.top=(document.documentElement.clientHeight-oDiv.offsetHeight)/2+"px";
			}
			window.οnscrοll=function(){
				var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
				var target=(document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop;
				clearInterval(timer);//在再次调用定时器之前先清除上一次的定时器，保证同时只有一个定时器在工作。
				timer=setInterval(function(){
					var oDiv=document.getElementById("test");
					speed=target-oDiv.offsetTop>0?Math.ceil((target-oDiv.offsetTop)/10):Math.floor((target-oDiv.offsetTop)/10);//保证速度都是一个整数，要不然会出现不能准确到达目标的bug。
					if(target==oDiv.offsetTop){
						clearInterval(timer);
					}
					else{
						oDiv.style.top=oDiv.offsetTop+speed+"px";
					}
				},30);
			}
		</script>
	</head>
	<body style="height:2000px">
		<div id="test"></div>
	</body>
</html>

该功能的实现调用了缓冲运动的框架，即：

1：定义全局变量timer与speed.

2：创建运动函数，先关闭定时器，再开启，以免再次调用时出现多个定时器同时工作的问题。

3：解决speed的计算。缓冲运动的speed的结果都要取整。用三目运算：speed=a>b?c:d;

注意，当页面没有规定文档类型时用document.body.clientHeight或者document.body.scrollTop若规定了DTD，则获取滚动条卷掉高度用document.documentElement.scrollTop.一般在用到scrollTop时，为了打到兼容目的，可以定义一个scrollTop变量，并为其赋值:

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