开发工具与关键技术: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后就会调用它的动画样式代码,这个效果就实现了