纯js和纯css制作鼠标移入移除滑动动画

最新推荐文章于 2024-05-05 00:40:01 发布

yufengxiaojiang3

最新推荐文章于 2024-05-05 00:40:01 发布

阅读量2.5k

点赞数 4

分类专栏：原生ECMAScript

本文链接：https://blog.csdn.net/yufengxiaojiang3/article/details/96914194

版权

原生ECMAScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

纯js和纯css制作鼠标移入移除滑动动画

你好，欢迎来到我的笔记本里。这里，我将分享我的心得，还有，感谢你的欣赏。

简单介绍用到的知识点

定位：position：absolute ，绝对定位，是相对于脱离文档流的父级定位标签进行定位，包括（absolute、relative），如果上一级没有找到，就继续一层一层的往上找，直到找到定位的标签，如果都没有，默认为body；
定位：position: relative,相对定位，相对于自身位置定位，常用于自身微小的位置定位；
动画：animation-duration:0.5s，设定动画的周期时间为0.5s,这个必须增加，不然就没有滑动的视觉效果；
透明度：opacity: 0.5;,设定透明度为0.5 = 50%；
关键帧动画：@keyframes + 动画名{ 0%{} 50%{} 100% }，设置该帧动画时间的时刻的动画效果；
js鼠标事件：onmouseenter || onmouseleave，绑定鼠标的移入和移除事件，不冒泡版。

动画设计思路

本来想偷懒在网上找纯js和纯css的滑动代码，结果半天全是jQuery版，在非正常情况下就是挂羊头卖狗肉，骗取浏览量。遂思考解决。
我使用的是animation+鼠标绑定事件，很好理解。
分别给鼠标移入和移除添加动画效果就可以了,特别注意top的值。来，上干货。

HTML部分

    <div class="lgLi">
            <div class="lgLiXuK">故里家居</div>
    </div>

css样式部分

.lgLiXuK{
    position: absolute;
    width:168px;
    height: 40px;
    top: 45px;
    text-align: center;
    line-height: 40px;
    background: orange;
    /* 
    position: absolute;  首先对目标标签进行绝对定位，
    添加好看的样式，无形中添加美观
     text-align: center;  文本字体 水平 居中
     line-height: 40px;   文本字体 垂直 居中 ，这里是相对于本标签高度，一般100%大小才处于中间
    添加背景颜色为了方便查看效果
     */
}
.lgLi{
    position: relative;
    width:168px;
    height:150px;
    background-color: antiquewhite;
    /* 
     position: relative;  添加相对定位
    */
}
.lgLiXuK001{
    top: 0px;
    animation-name:lgLiXuKX;
    animation-duration:0.5s;
    animation-timing-function: linear;
    /* 
    animation-name:lgLiXuKX;  动画设定的名称，这是为了后续的 @keyframes + 动画名 准备
    animation-duration:0.5s;  动画的周期时间
     animation-timing-function: linear;  规定动画的速度曲线 ： 匀速
    */
}
@keyframes lgLiXuKX{
    0%{
        opacity: 0;
        top: 45px;
    }
    100%{
        top:0px;
        opacity: 1;
    }
    /* 
    @keyframes lgLiXuKX{}  ：关键帧 + 动画名称 + {} 
    0% ~ 100% ：是为了设定帧动画显示时间
      opacity: 1;  透明度： 0 为全透明， 1 = 100% 是不透明
    */
}
 .lgLiXuK002{
    top:45px;
    animation-name:lgLiXuKX2;
    animation-duration:0.5s;
    animation-timing-function: linear;
    /*  */
}
@keyframes lgLiXuKX2{
    0%{
        opacity: 1;
        top:0px;
    }
    100%{
        top:45px;
        opacity: 0;
    }
}

js部分

    //获取目标元素dom结构
    var lgLiXuKX = document.querySelector('.lgLiXuK');  
    var lgLi = document.querySelector('.lgLi')
    console.log(lgLiXuKX)
    console.log(lgLi)
    //绑定鼠标事件，添加和删除类，注意，使用  目标DOM.classList.add() 结构
    lgLi.onmouseenter = function () {
    lgLiXuKX.classList.add('lgLiXuK001');
    lgLiXuKX.classList.remove('lgLiXuK002');
    console.log('a') //鼠标移入提示信息
    }
    lgLi.onmouseleave = function () {
        lgLiXuKX.classList.add('lgLiXuK002');
        lgLiXuKX.classList.remove('lgLiXuK001');
        console.log('b') //鼠标移出提示信息
    }

链接: link.

在这里插入图片描述

如何插入一段漂亮的代码片后面这个是加强版的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>纯js和纯css制作鼠标移入移除滑动动画</title>
</head>
<style>
.lgLiXuK{
    position: absolute;
    width:168px;
    height: 40px;
    top: 45px;
    text-align: center;
    line-height: 40px;
    background: orange;
}
.mobanSpan{
    position: absolute;
    display: inline-block;
    width:168px;
    height: 40px;
    top: 45px;
    text-align: center;
    line-height: 40px;
    background: #3f3290;
    display: none;
}
.lgLi{
    position: relative;
    width:225px;
    height:225px;
    background-color: antiquewhite;
}
.lgLiXuK001{
    display: block;
    top: 0px;
    animation-name:lgLiXuKX;
    animation-direction: alternate;
    animation-duration:0.5s;
    animation-timing-function: linear;
}
@keyframes lgLiXuKX{
    0%{
        opacity: 0;
        top: 45px;
    }
    100%{
        top:0px;
        opacity: 1;
    }
}
 .lgLiXuK002{
    display: block;
    top:45px;
    animation-name:lgLiXuKX2;
    animation-direction: alternate;
    animation-duration:0.5s;
    animation-timing-function: linear;
}
@keyframes lgLiXuKX2{
    0%{
        opacity: 1;
        top:0px;
    }
    100%{
        top:45px;
        opacity: 0;
    }
}
</style>

<body>
    <div class="lgLi">
            <div class="lgLiXuK">故里家居</div>
            <span class="mobanSpan">网页模板</span>
    </div>
</body>
</html>
<script>
    var lgLiXuKX = document.querySelector('.lgLiXuK');
    var lgLi = document.querySelector('.lgLi')
    console.log(lgLiXuKX)
    console.log(lgLi)
    lgLi.onmouseenter = function () {
    lgLiXuKX.classList.add('lgLiXuK001');
    lgLiXuKX.classList.remove('lgLiXuK002');
    console.log('a')
    }

    lgLi.onmouseleave = function () {
        lgLiXuKX.classList.add('lgLiXuK002');
        lgLiXuKX.classList.remove('lgLiXuK001');
        console.log('b')
    }
</script>

yufengxiaojiang3

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
纯js和纯css制作鼠标移入移除滑动动画

纯js和纯css制作鼠标移入移除滑动动画你好，欢迎来到我的笔记本里。这里，我将分享我的心得，还有，感谢你的欣赏。简单介绍用到的知识点定位：position：absolute ，绝对定位，是相对于脱离文档流的父级定位标签进行定位，包括（absolute、relative），如果上一级没有找到，就继续一层一层的往上找，直到找到定位的标签，如果都没有，默认为body；定位：position: ...
复制链接

扫一扫