CSS 布局与 JS 结合实现某宝店铺首页

前几天根据学习的知识整理的JS运动框架，这里直接引用JS运动框架，页面主要是实现css网页布局与JS运动、事件，随便找了一个某宝上的店铺借鉴

简书.gif

传送门

JS运动搞不定，你缺少一个框架而已
这里引用的JS 没整明白的可以去看一下

01总体布局

CSS布局

采用盒子嵌套布局使用magrin：0 auto;实现div的居中
涉及到div的浮动，浮动元素的父级需要清除浮动
使用CSS代码装饰时，可以将div的border打印出来验证，以免发生错误

02 图片滚动

商品推荐（ul）.gif

这是一个很典型的利用运动框架写的图片上下滚动
定时器实现自动滚动
ul列包括图片和价格，按钮的层级z-index高于ul列的
图片是一个ul li列， ul 相对定位，使 ul 的 top 属性改变实现上下滚动
startMove（oUl, { top:vlaue }），oUL为ul列，vlaue为移动的值
在左右按钮上添加事件，左：在当前oUL.offsetTop - li 的高度

代码实现

//左按钮事件
//oUl为存放图片的无序列表
//oLi为oUl内的列
Btn_left.onclick=function(){
    var vlaue = oUl.offsetTop; 
    if (vlaue<=0) {
      vlaue=(oLi.length-1)*-60;   
    } else {
             vlaue=vlaue+60;
    }
    startMove(oUl,{top:vlaue});
};
Btn_right.onclick=function(){
    tab();
};
//tab函数，使用判断解决到达临界值
function tab(){
      var vlaue = oUl.offsetTop;
    if (vlaue<=-180) {
        vlaue=0;   
    } else {
        vlaue=vlaue-60;
    }
    startMove(oUl,{top:vlaue}); 
}
//定时器实现自动滚动
timer=setInterval(tab,2000);  
//oTuijian为按钮和ul列的父级盒子 当鼠标移动上的时候停止计时器
oTuijian.onmouseover=function(){
      clearInterval(timer);
};
oTuijian.onmouseout=function(){
        timer=setInterval(tab,2000);  
};

03 下拉菜单

下拉菜单.gif

CSS代码实现

.allBao{display: inline-block;}
.allBao_bd{position:absolute;display:none;width:200px;border: 1px solid gainsboro;z-index: 2;background: white;}
.allBao:hover .allBao_bd{display: block;}

父级display 属性为内联元素
子菜单postion为相对定位
默认display为none不显示
当鼠标移动到父级上的触发控件上的时候子菜单的display：block;

html代码

04 缓冲运动

JS菜单匀速运动.gif

布局

allBao的父级导航条nav是绝对定位，二级菜单根据导航条相对定位
这里我把二级菜单与一级菜单ul作为兄弟，也可以与allBao_bd作为兄弟级，改变的是相对定位的位置的不同
二级菜单的width初始值为0，当鼠标移动到一级菜单的时候改变width的值
二级菜单上记得添加overfllow：hidden，否则里面的内容会直接显示了
JS代码

//one_menu是二级菜单  
//one是一级菜单
//aIcon[0]是二级菜单的背景图片
one_menu.onmouseover=one.onmouseover=function(){
        //修改背景图片的backgroundPositionY
     startMove(aIcon[0],{backgroundPositionY:-71});
     startMove(one_menu,{width:180});
};
one_menu.onmouseout=one.onmouseout=function(){
    startMove(aIcon[0],{backgroundPositionY:-102});
    startMove(one_menu,{width:0});            
};

这里需要注意的是，需要给二级菜单与一级菜单上都添加事件，避免从一级菜单移动到二级菜单时菜单消失
通过修改二级菜单one_menu的width值，这里的缓冲运动都是使用运动函数写的

05

总结一下

运用div盒子模型和css代码样式与js事件绑定实现的简单网页。这里重点写了利用我的上篇文章中总结的JS运动框架，可以看出，很多都可以使用那个实现。无论是轮播图片、菜单的显示、以及背景图片的位置改变。以及等等。

CSS 布局与 JS 结合 实现某宝店铺首页

传送门

01总体布局

02 图片滚动

代码实现

03 下拉菜单

CSS代码实现

html代码

04 缓冲运动

布局

JS代码

05

总结一下

CSS 布局与 JS 结合实现某宝店铺首页