|
|
楼主 |
发表于 2022-7-20 20:45
|
显示全部楼层
本帖最后由 马黑黑 于 2022-7-20 20:59 编辑
JS基于对象的应用核心代码：
let objAni = {
0: 'out', 1: 'show', 2: 'back',
playMode: function() {
if(aniId == 0) {
son.src = picAr[picId];
picId ++;
if(picId > picAr.length - 1) picId = 0;
}
son.style.animation = this[aniId] + ' 2s linear forwards';
aniId ++;
if(aniId > 2) aniId = 0;
},
}
这里创建了一个 objAni （动画）对象，该对象有三个属性 0、1、2 和一个方法 playMode()，其中：
属性 0、1、2 ：分别指定动画出场、展示和退场等三个关键帧动画名称，这些动画在CSS里已经设置好；
playMode() 方法让 HTML 的 img 元素 son 更换图片和播放动画。其中，更换图片的依据有，对象外部的 picId 索引变量、picAr 图片数组、播放动画的标识 aniId；播放动画则依据 aniId 即播放动画索引标识。
关于JS对象，我在后花园里有一篇专题。
|
评分
-
| 参与人数 1 | 威望 +50 |
金钱 +100 |
经验 +50 |
收起
理由
|
 红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|
发表于 2022-7-20 20:45
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2022-7-20 21:03
