前言
花季少女和小米官网你选哪个?只有小孩子才做选择,你当然都会拥有!我们今天就看看花季美少女是怎么用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);
总结
我这里做的是在“高度”上动手脚,我们也可以用slideup和slidedown。因为我这个代码是js改版的,老师让我们改为jQuery,所以没有在逻辑上做改变。我觉得用slideup和slidedown应该也挺简单的(我当时还没学 呜呜呜~),多了解一种方法也是极好的呢!毕竟技多不压身啦 ~