店铺首页图片css,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.οnclick=function(){

var vlaue = oUl.offsetTop;

if (vlaue<=0) {

vlaue=(oLi.length-1)*-60;

} else {

vlaue=vlaue+60;

}

startMove(oUl,{top:vlaue});

};

Btn_right.οnclick=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.οnmοuseοver=function(){

clearInterval(timer);

};

oTuijian.οnmοuseοut=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代码

所有分类

• 所有宝贝

• 一半女生 一半女人

• 2016.12上新

04 缓冲运动

JS菜单匀速运动.gif

布局

所有分类

• 所有宝贝

• 按销量
• 按人气
• 按价格

allBao的父级导航条nav是绝对定位，二级菜单根据导航条相对定位

这里我把二级菜单与一级菜单ul作为兄弟，也可以与allBao_bd作为兄弟级，改变的是相对定位的位置的不同

二级菜单的width初始值为0，当鼠标移动到一级菜单的时候改变width的值

二级菜单上记得添加overfllow：hidden，否则里面的内容会直接显示了

JS代码

//one_menu是二级菜单

//one是一级菜单

//aIcon[0]是二级菜单的背景图片

one_menu.οnmοuseοver=one.οnmοuseοver=function(){

//修改背景图片的backgroundPositionY

startMove(aIcon[0],{backgroundPositionY:-71});

startMove(one_menu,{width:180});

};

one_menu.οnmοuseοut=one.οnmοuseοut=function(){

startMove(aIcon[0],{backgroundPositionY:-102});

startMove(one_menu,{width:0});

};

这里需要注意的是，需要给二级菜单与一级菜单上都添加事件，避免从一级菜单移动到二级菜单时菜单消失

通过修改二级菜单one_menu的width值，这里的缓冲运动都是使用运动函数写的

05

总结一下

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