seckill web
seckill web 是基于小米秒杀官方网站原样输出的仿站，该网站继承了小米官方商城网站的基本模块，在通用范围的基础上，动态展示秒杀类商品栏目
网站结构
- top_nav
- mifast_header
- mifast_header_childLists
- mifast_main
- mifast_footer
CSS部分(不可忽视的CSS的微妙操作)
font-size:0去除元素间间距，使其紧密排布
.top_nav .main_left {
float:left;
font-size:0px;
}
text-indent隐藏内容信息，保留超链接，显示图片形式
.mifast_main .main_head h2 {
font-size:2em;
margin:15px 0;
text-align:center;
text-indent:-9999px;
}
ul>li:not()列表项后代排除操作
.mifast_footer li:not(:last-child){
border-right:1px solid #e0e0e0;
}
background:···背景设置，一个复合属性
.mifast_footer .option_contact .wb {
background:url(../images/mifast_footer/wb.png) no-repeat 50% 0; /*指定背景图像填充的位置*/
background-size:cover; /*将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。*/
}
line-height和vertical-align
ine-height 属性设置行间的距离（行高）
该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。
line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。
原始数字值指定了一个缩放因子，后代元素会继承这个缩放因子而不是计算值。
vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。
vertical-align 只对行内元素、表格单元格元素生效：不能用它垂直对齐块级元素。
box-shadow的使用，box-shadow:
box-shadow:0 2px 3px #e0e0e0;
主题主页图标动画，在鼠标移入和移出时实现主题、主页图标的切换
.mifast_header .logo::before {
background:url(../images/mi-logo.png) no-repeat 50% 50%;
opacity:1;
}
.mifast_header .logo::after {
background:url(../images/mi-home.png) no-repeat 50% 50%;
opacity:0;
margin-left:-55px;
}
.mifast_header .logo:hover::before {
margin-left:55px;
opacity:0;
}
.mifast_header .logo:hover::after {
margin-left:0px;
opacity:1;
}
.mifast_header .logo {
display:block;
width:55px;
height:55px;
background-color:#ff6700;
}
.mifast_header .logo::before ,.mifast_header .logo::after {
content:'';
position:absolute;
width:55px;
height:55px;
z-index:1;
top:0;
left:0;
transition:all 0.2s;
}
JS交互
搜索输入框的交互
鼠标移入搜索框，改变图标字体颜色及背景，移出无
鼠标移入输入框，搜索框、输入框边框以增强色显示，移出无
鼠标点击输入框，改变所有边框的颜色以显著色显示，同时弹出与输入框无缝衔接的默认商品信息列表框，点击框外无
此处元素涉及2个事件：mouseenter/mouseleave, focusin/foucsout , 这2个事件共同之处是都致力于在各自的操作中改变元素边框的颜色，而此时样式的渲染会产生冲突,于是需要设置不同的css样式优先级，在不同的操作中优先级高的会覆盖掉优先级低的，以达到互不干扰的操作
$('.search').mouseenter(
function(){
$(this).addClass('showhover')
$('.submit_btn').addClass('showhover')
})
$('.search').mouseleave(
function () {
$(this).removeClass('showhover')
$('.submit_btn').removeClass('showhover')
},
)
$('.search').focusin(function(){
$(this).addClass('showfocus')
$('.submit_btn').addClass('showfocus')
$('#slidedown').removeClass('shutoff')
})
$('.search').focusout(function () {
$(this).removeClass('showfocus')
$('.submit_btn').removeClass('showfocus')
$('#slidedown').addClass('shutoff')
})
商品类目选项栏的交互
在指定的商品类目下弹出指定的商品项信息
$('.firstList').focusin(
function(){
$('#header_childLists>div').each(function(){
$(this).addClass('childLists_none')
})
let index=$(this).index()-1
// console.log(index)
$('#header_childLists>div')[index].className = 'childLists '
}
)
$('.firstList').focusout(
function () {
let index = $(this).index() - 1
// console.log(index)
$('#header_childLists>div')[index].className = 'childLists childLists_none'
}
)
秒杀商品Tab选项菜单
大块的tabs选项卡，在指定选项中只显示指定的商品陈列信息
let tabsLists = document.getElementById('tabsLists')
let tabItem=tabsLists.getElementsByTagName('li')
let seckilltab = document.getElementById('seckills')
let tabActive=seckilltab.getElementsByTagName('ul')
for( let i=0; i<tabItem.length; i++){
tabItem[i].onclick=function(){
for (let j = 0; j < tabItem.length; j++) {
tabItem[j].className = ''
tabActive[j].className='clearfix'
}
this.className='showred_item'
tabActive[i].className ='clearfix seckill_active'
}
}
秒杀商品Tab选项栏的区间固定
通过固定操作将Tab选项卡展示在核心C位
$(window).scroll(function(){
let topIns=$(this).scrollTop()
if(topIns>=260){
$('#seckillTab').addClass('sticky')
}else{
$('#seckillTab').removeClass('sticky')
}
})
