seckill web 是基于小米秒杀官方网站原样输出的仿站,该网站继承了小米官方商城网站的基本模块,在通用范围的基础上,动态展示秒杀类商品栏目
网站结构
- top_nav
- mifast_header
- mifast_header_childLists
- mifast_main
- mifast_footer
CSS部分(不可忽视的CSS的微妙操作)
font-size:0
去除元素间间距,使其紧密排布
1 2 3 4
| .top_nav .main_left { float:left; font-size:0px; }
|
text-indent
隐藏内容信息,保留超链接,显示图片形式
1 2 3 4 5 6
| .mifast_main .main_head h2 { font-size:2em; margin:15px 0; text-align:center; text-indent:-9999px; }
|
ul>li:not()
列表项后代排除操作
1 2 3
| .mifast_footer li:not(:last-child){ border-right:1px solid #e0e0e0; }
|
background:···
背景设置,一个复合属性
1 2 3 4
| .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
1
| box-shadow:0 2px 3px #e0e0e0;
|
主题主页图标动画,在鼠标移入和移出时实现主题、主页图标的切换
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
| .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样式优先级,在不同的操作中优先级高的会覆盖掉优先级低的,以达到互不干扰的操作
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
| $('.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') })
|
商品类目选项栏的交互
在指定的商品类目下弹出指定的商品项信息
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| $('.firstList').focusin( function(){ $('#header_childLists>div').each(function(){ $(this).addClass('childLists_none') }) let index=$(this).index()-1 $('#header_childLists>div')[index].className = 'childLists ' } ) $('.firstList').focusout( function () { let index = $(this).index() - 1 $('#header_childLists>div')[index].className = 'childLists childLists_none' } )
|
秒杀商品Tab选项菜单
大块的tabs选项卡,在指定选项中只显示指定的商品陈列信息
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| 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位
1 2 3 4 5 6 7 8
| $(window).scroll(function(){ let topIns=$(this).scrollTop() if(topIns>=260){ $('#seckillTab').addClass('sticky') }else{ $('#seckillTab').removeClass('sticky') } })
|
项目地址
我的项目