用javascript和css实现菜单淡入淡出及滑动效果

最新推荐文章于 2024-03-30 20:40:58 发布

Sshm_666

最新推荐文章于 2024-03-30 20:40:58 发布

阅读量1.7k

点赞数 3

文章标签： javascript css html

本文链接：https://blog.csdn.net/m566666/article/details/120956337

版权

先写一个HTML文件里面嵌入css代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/democd.css">
    <script src="js/democd.js" defer></script>
</head>

<body>
    <ul class="menu">
        <li>
            <a href="">一级菜单1</a>
            <ul>
                <li><a href="">二级菜单1</a></li>
                <li><a href="">二级菜单2</a></li>
                <li><a href="">二级菜单3</a></li>
                <li><a href="">二级菜单4</a></li>
                <li><a href="">二级菜单5</a></li>
            </ul>
        </li>
        <li>
            <a href="">一级菜单2</a>
            <ul>
                <li><a href="">二级菜单1</a></li>
                <li><a href="">二级菜单2</a></li>
                <li><a href="">二级菜单3</a></li>
                <li><a href="">二级菜单4</a></li>
                <li><a href="">二级菜单5</a></li>
            </ul>
        </li>
        <li>
            <a href="">一级菜单3</a>
            <ul>
                <li><a href="">二级菜单1</a></li>
                <li><a href="">二级菜单2</a></li>
                <li><a href="">二级菜单3</a></li>
                <li><a href="">二级菜单4</a></li>
                <li><a href="">二级菜单5</a></li>
            </ul>
        </li>
        <li>
            <a href="">一级菜单4</a>
            <ul>
                <li><a href="">二级菜单1</a></li>
                <li><a href="">二级菜单2</a></li>
                <li><a href="">二级菜单3</a></li>
                <li><a href="">二级菜单4</a></li>
                <li><a href="">二级菜单5</a></li>
            </ul>
        </li>
        <li>
            <a href="">一级菜单5</a>
            <ul>
                <li><a href="">二级菜单1</a></li>
                <li><a href="">二级菜单2</a></li>
                <li><a href="">二级菜单3</a></li>
                <li><a href="">二级菜单4</a></li>
                <li><a href="">二级菜单5</a></li>
            </ul>
        </li>
    </ul>
</body>

</html>

css代码：

点开HTML文件后界面如下图：但不能实现动画效果

css代码：

* {
    margin: 0;
    padding: 0;
}

.menu {
    display: flex;
    justify-content: center;
    margin-top: 100px;
    background-color: #910000;
}

.menu>li {
    margin: 0 20px;
    list-style: none;
    position: relative;
}

.menu li a {
    display: block;
    padding: 10px;
}

.menu>li>ul {
    list-style: none;
    display: none;
    position: absolute;
    background-color: #910000;
    top: 40px;
    left: 0;
}

.menu li a {
    text-decoration: none;
    color: black;
}

.menu li a:hover {
    background-color: aliceblue;
}

1、用js方法需要先获取定义的ul的class

获取元素时有两种方式：

用id方式获取：document.getElementById();

2.通过css选择器：

document.querySelector();

这种方式获取的元素只能是一个，只会返回一个对象和通过id方式获取的方式相似

document.querySelectorAll();

这种方式会获取到所有的选择器内容，它返回的是一个数组

js中onmouseover是鼠标悬停时的事件，onmouseout是鼠标离开时的事件

js代码：

var q = document.querySelectorAll(".menu>li")
for (var i = 0; i < q.length; i++) {
    q[i].onmouseover = function() {
        if (this.querySelector("ul")) {
            this.querySelector("ul").style.display = "block"
        }
    }
    q[i].onmouseout = function() {
        if (this.querySelector("ul")) {
            this.querySelector("ul").style.display = "none"
        }
    }
}

css中在*{}里用

transition:all 3s

如果是transition:background ease它的淡入淡出效果是速度有快到慢是个过渡函数，如果想让淡入淡出速度一致用transition:background linear 。

例：transition:background 3s linear。在background后写的第一个秒数是淡入淡出的时间。

例：transition:background 3s 3s linear。在background后写的第二个秒数是淡入淡出延迟的时间。

实现鼠标悬停在菜单a标签上时a标签的淡入淡出效果。

因为使用css已经实现淡入淡出效果在js中用opacity属性可以实现透明度的淡入淡出

把js中display改成opacity css中display也改成opacity

var q = document.querySelectorAll(".menu>li")
console.log(q) //用for循环就是为了q[0],q[1],...
for (var i = 0; i < q.length; i++) {
    q[i].onmouseover = function() {
        if (this.querySelector("ul")) {
            this.querySelector("ul").style.opacity = "1"//display改掉
        }
    }
    q[i].onmouseout = function() {
        if (this.querySelector("ul")) {
            this.querySelector("ul").style.opacity = "0"//display改掉
        }
    }
}

.menu>li>ul {
    list-style: none;
    opacity: 0;//display改掉
    position: absolute;
    background-color: #910000;
    top: 40px;
    left: 0;
}

这样就实现了透明度淡入淡出效果。

要想实现滑动效果需要用到height方法，我们需要把opacity改成height，但是在js中显示高度时需要获取盒子的高度则需要用到以下方法：clientHeight（内容区+填充区）offsetHeight（内容区+填充区+边框区）scrollHeight（盒子真实高度）

在css更改的代码如下;

.menu>li>ul {
    list-style: none;
    position: absolute;
    height: 0;
    overflow: hidden;
    /*一定要设置overflow不然会挤出 */
    background-color: #910000;
    top: 40px;
    left: 0;
}

js代码如下：

var q = document.querySelectorAll(".menu>li")
for (var i = 0; i < q.length; i++) {
    q[i].onmouseover = function() {
        var numHeight = 0; //定义下拉框的真实高度
        var list = this.querySelectorAll("ul li") //获取悬停在哪个标签下的li,方便遍历他们的高度
        console.log(list)
        for (var j = 0; j < list.length; j++) {
            numHeight += list[j].clientHeight
        }
        if (this.querySelector("ul")) {
            this.querySelector("ul").style.height = numHeight + "px"
        }
    }
    q[i].onmouseout = function() {
        if (this.querySelector("ul")) {
            this.querySelector("ul").style.height = "0"
        }
    }
}

这样就能实现动画下拉操作了

Sshm_666

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
用javascript和css实现菜单淡入淡出及滑动效果

先写一个HTML文件里面嵌入css代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"
复制链接

扫一扫