阴阳师PC官网(仿-->17/5月) -- 知识点

CSS动画与事件处理技巧

最新推荐文章于 2025-02-24 08:38:48 发布

原创最新推荐文章于 2025-02-24 08:38:48 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#pc

知识点同时被 2 个专栏收录

52 篇文章

订阅专栏

操练

5 篇文章

订阅专栏

本文介绍了使用CSS实现页面居中的方法及动画属性的高级应用，包括animation-direction、animation-play-state等，并探讨了如何通过JavaScript处理事件的目标对象与触发对象。

这里整理过程中遇到知识点

页面居中的css样式

/*页面居中*/
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;

animation的加深运用

    animation-direction 规定动画是否在下一周期逆向地播放。    --->是否返回    alternate

    animation-play-state    规定动画是否正在运行或暂停。     --->暂停           pause 

    animation-fill-mode 规定对象动画时间之外的状态。         --->停在最后一幁  forwards 

    animation-delay 规定动画何时开始。默认是 0。             --->延迟

目标对象 event.target 触发对象 event.currentTarget

目标对象 event.target
==>可返回事件的目标节点（触发该事件的节点）---  鼠标下最上层的节点

触发对象 event.currentTarget 
==>返回其监听器触发事件的节点

$scroll.click(function (e) {
   // console.log(e.target);
    // 阻止捕获
    if(e.target == this){
        var top = $scrollBar.position().top,
            stop = e.clientY - $scroll.offset().top + $(document).scrollTop();
        stop > top ? top += 100: top -=100;
        setTop(top,mainH,txtH,$scrollBar,$main,maxS,false);
    }
})