花季美少女和小米官网你选哪个？

最新推荐文章于 2024-06-15 16:53:15 发布

“玫瑰无原则 ”

最新推荐文章于 2024-06-15 16:53:15 发布

阅读量1.3k

点赞数 13

文章标签： javascript 前端开发语言 jquery css

本文链接：https://blog.csdn.net/m0_60273757/article/details/121501340

版权

前言

花季少女和小米官网你选哪个？只有小孩子才做选择，你当然都会拥有！我们今天就看看花季美少女是怎么用jQuery写小米官网的，看看女孩子的思维和男孩子有什么不一样！css的东西我这里就不多说啦，时间紧任务重！主要是给大家讲解一下怎么实现一个高度变化的效果呢~

效果展示

家人们，这里一整个效果就是高度变换和鼠标的位置变换带来的效果。我围绕这两点详细讲解~

高度变换

概述

这里的高度变换讲解就是，当我们鼠标移动进入区域的时候会显示出对应的板块，但是这里最后两个是没有对应板块的，所以需要鼠标进入的时候板块收回。

讲解

鼠标移动到这个位置的时候就将高度变为0，加上过渡效果（transition: all 0.3s）以及overflow：hidden，就可以实现这个丝滑的变换效果。
这里需要控制鼠标的位置，不是鼠标离开就消失，而是鼠标是可以进入出现的板块的。从而得知，高度变为0的条件是：鼠标不在出现区域以及不在进入位置区域。
需要注意的是，这里最后两个li的位置鼠标移动上去时，是需要马上消失的也是高度变为0的一个条件。

代码

css代码（是需要主要特别设置的地方）

       需要出现的板块{

        overflow: hidden;//防止高度消失其他内容在外面
        transition: all 0.3s;//添加过渡效果才能实现“丝滑”
        
        // 隐藏本来的高度设置为0
        // height: 215px;
        height: 0px;
}

jQuery代码

        var dowload = $('#download');//鼠标移动到这里QR_codes出现
        var QR_codes = $('.QR_codes');
        
        var flag3 = true;//判断鼠标是否离开dowload
        var flag4 = true;//判断鼠标是否离开QR_codes

        dowload.hover(function () {
            flag3 = false;
            QR_codes.css("height", "215px");//鼠标进入QR_codes出现

        }, function () {
            flag3 = true;

        });


        QR_codes.hover(function () {
            flag4 = false;

        }, function () {
            flag4 = true;

        });


        setInterval(function () {
            if (flag3 && flag4) {
                QR_codes.css("height", "0px");//鼠标不在QR_codes和dowload区域 板块消失
            }
        }, 15);