前几天根据学习的知识整理的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运动框架，可以看出，很多都可以使用那个实现。无论是轮播图片、菜单的显示、以及背景图片的位置改变。以及等等。
网友评论