# miseckill

**Repository Path**: moofing/miseckill

## Basic Information

- **Project Name**: miseckill
- **Description**: imitate seckill web
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-02-23
- **Last Updated**: 2021-02-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

seckill web 是基于小米秒杀官方网站原样输出的仿站，该网站继承了小米官方商城网站的基本模块，在通用范围的基础上，动态展示秒杀类商品栏目 

## 网站结构

1. top_nav
2. mifast_header
3. mifast_header_childLists
4. mifast_main
5. mifast_footer

## CSS部分(不可忽视的CSS的微妙操作)

###  `font-size:0`去除元素间间距，使其紧密排布

```css
.top_nav .main_left {
  float:left;
  font-size:0px;
}
```
### `text-indent`隐藏内容信息，保留超链接，显示图片形式

```css
.mifast_main .main_head h2 {
  font-size:2em;
  margin:15px 0;
  text-align:center;
  text-indent:-9999px;
}
```
###  `ul>li:not()`列表项后代排除操作

```css
.mifast_footer li:not(:last-child){
  border-right:1px solid #e0e0e0;
}
```
###  `background:···`背景设置，一个复合属性

```css
.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: <offset-x> <offset-y> <blur-radius> <spread-radius> <color>

```css
box-shadow:0 2px 3px #e0e0e0;
```

###  主题主页图标动画，在鼠标移入和移出时实现主题、主页图标的切换

```css
.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样式优先级，在不同的操作中优先级高的会覆盖掉优先级低的，以达到互不干扰的操作

```javascript
 $('.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')
  }) 
```

### 商品类目选项栏的交互

在指定的商品类目下弹出指定的商品项信息

```javascript
$('.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选项卡，在指定选项中只显示指定的商品陈列信息

```javascript
 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位

```javascript
$(window).scroll(function(){
     let topIns=$(this).scrollTop()
     if(topIns>=260){
       $('#seckillTab').addClass('sticky')
     }else{
       $('#seckillTab').removeClass('sticky')
     }
   })
```