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代码

<div class="allBao clear">
    <!--触发按钮-->
    <a href="#">所有分类</a>
    <!--下拉菜单div-->
    <div class="allBao_bd">
        <!--菜单列-->
        <ul>
            <li>
                <div class="icon"></div>
                <a href="#" id="one_show">所有宝贝</a>
            </li>
            <li>
                <div class="icon"></div>
                <a href="#" id="two_show">一半女生 一半女人</a>
            </li>
            <li>
                <div class="icon"></div>
                <a href="#" id="three_show">2016.12上新</a>
            </li>           
        </ul>
    </div>
    <!--allBao_bd结束-->
</div>
<!--allBao结束-->

04 缓冲运动

---

JS菜单匀速运动.gif

布局

<div class="allBao clear">
    <!--触发按钮-->
    <a href="#">所有分类</a>
    <!--下拉菜单div-->
    <div class="allBao_bd">
        <!--菜单列-->
        <ul>
            <li>
                <div class="icon"></div>
                <a href="#" id="one_show">所有宝贝</a>
            </li>
        </ul>
        <!--一级菜单结束-->
        <div class="allBaoBei">
            <ul>
                <li><a href="#">按销量</a></li>
                <li><a href="#">按人气</a></li>
                <li><a href="#">按价格</a></li>
            </ul>
        </div>
        <!--allBaoBei结束-->
    </div>
    <!--allBao_bd结束-->
</div>
<!--allBao结束-->

• 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运动框架，可以看出，很多都可以使用那个实现。无论是轮播图片、菜单的显示、以及背景图片的位置改变。以及等等。