前言

花季少女和小米官网你选哪个？只有小孩子才做选择，你当然都会拥有！我们今天就看看花季美少女是怎么用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;//判断鼠标是否离开dowloadvar flag4 = true;//判断鼠标是否离开QR_codesdowload.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);

总结

我这里做的是在“高度”上动手脚，我们也可以用slideup和slidedown。因为我这个代码是js改版的，老师让我们改为jQuery，所以没有在逻辑上做改变。我觉得用slideup和slidedown应该也挺简单的（我当时还没学呜呜呜~），多了解一种方法也是极好的呢！毕竟技多不压身啦 ~

花季美少女和小米官网你选哪个？相关推荐

使用html和css的一些案列（小米官网）
1.小米导航栏 html部分 <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
HTML+CSS小米官网首页 (1页侧拉菜单)
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 公司官网网站 | 企业官网 | 酒店官网 | 等网站的设计与制 ...
前端实战：仿写小米官网第一天
前端实战的第一天小米官网目前效果: 实现功能: 导航栏,首页切换,无淡入淡出效果的轮播图,搜索功能,产品展示栏下滑代码(便于记录,将js.css和html糅合在了一起): <!DOCTYP ...
小米官网静态网页练习记录
本次练习是在完成京东网页的独自完成,来达到提升熟练度的目的. 完成效果图总结 (1)logo:在logo处不只是放图片,还外加文字通过检索权重 .header-b .logo::before{ co ...
仿照小米官网项目具体操作与细节
本项目已上传github 有需要的可以下载点这里前往下载小米官网项目具体操作 1.gulp的搭建一 , 打开node控制台命令行输入 cd 加文件夹路径进入当前文件夹命令行输入 cnpm ...
第一个完整页面来啦~小米官网
不知不觉学习前端已经快4个月啦,之前没学JavaScript之前做的项目都只能看不能玩,小米官网这个页面算上写出的第一个相对完整一点的项目,虽然需要进步的地方还有很多,但是未来可期! 本篇博客主要是针 ...
html css 模仿小米官网搜索框
写网页效果,掌握html,css,唯一的捷径就是多模仿,多练习.小米官网的搜索框效果看似简单,实际写代码的时候才发现要掌握好多css知识才能完成效果.浮动.导航条.鼠标经过.定位.文字框效果实现.js ...
Outline，Input样式的设置，小米官网搜索框
在做小米项目右上角的搜索框的时候,发现了该问题,现总结如下: outline outline和border类似,只不过outline不占用空间,而border占用空间 #box1{width: 300 ...
小米官网首屏纯css代码
小米官网首屏代码(纯CSS编写) ** 1.html部分: ** 小米商城  <div class="top-bar w"> ...

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

前言

效果展示

高度变换

概述

讲解

代码

总结

花季美少女和小米官网你选哪个？相关推荐

最新文章

热门文章