加载调用事件

开发工具与关键技术：DW;
作者：刘锦荣
撰写时间：2019年2月13日

每当屏幕加载到某个值得时候，就调用相对应的代码该如何实现呢？做了一个小小的例子

这两个方块是在屏幕的高度加载到某个像素值后才调用代码的，在像素值不相对应的时候，它是隐藏到两边黑色部分里面的。
1.它是两个标签给予样式实现出来的

		<a href="#" class="Left" id="Left" style="display: none;"></a>
		<a href="#" class="Right" id="Right" style="display: none;"></a>

2.它的显示我们可以添加一个动画样式，便于好看；

.Left{
	display:flex;
	width: 144px;
	height:100px;
	border-top-right-radius: 15%;
	border-bottom-right-radius: 15%;
	background:rgb(23, 169, 156);
	position: absolute;
	margin-top: -195px;
	margin-left: -144px;
    animation:around 3s ease .3s forwards;
}
.Right{
	display:flex;
	width: 144px;
	height:100px;
	border-top-left-radius: 15%;
	border-bottom-left-radius: 15%;
	background:rgb(23, 169, 156);
	position: absolute;
	margin-top: -195px;
	right:-144px;
    animation:word 3s ease .3s forwards;
}
@keyframes around {
	 0%{
	 transform:translateX(0px);
	}
	 100% {
	 transform: translateX(144px);
	}
}
@keyframes word {
	 0%{
	 transform:translateX(0);
	}
	 100% {
	 transform: translateX(-144px);
	}
}

3.写出加载到相对应的的像素的代码，我们设置好它的基本样式后，在window.onloadl里面获取好相对应的ID，再添加如下的代码：

这样高度像素加载到-3840px后就会调用它的动画样式代码,这个效果就实现了