前幾天根據(jù)學(xué)習(xí)的知識(shí)整理的JS運(yùn)動(dòng)框架，這里直接引用JS運(yùn)動(dòng)框架，頁面主要是實(shí)現(xiàn)css網(wǎng)頁布局與JS運(yùn)動(dòng)、事件，隨便找了一個(gè)某寶上的店鋪借鑒
簡(jiǎn)書.gif
傳送門
JS運(yùn)動(dòng)搞不定，你缺少一個(gè)框架而已
這里引用的JS 沒整明白的可以去看一下
01總體布局
CSS布局
- 采用盒子嵌套布局 使用magrin：0 auto;實(shí)現(xiàn)div的居中
- 涉及到div的浮動(dòng)，浮動(dòng)元素的父級(jí)需要清除浮動(dòng)
- 使用CSS代碼裝飾時(shí)，可以將div的border打印出來驗(yàn)證，以免發(fā)生錯(cuò)誤
02 圖片滾動(dòng)
商品推薦（ul）.gif
- 這是一個(gè)很典型的利用運(yùn)動(dòng)框架寫的圖片上下滾動(dòng)
- 定時(shí)器實(shí)現(xiàn)自動(dòng)滾動(dòng)
- ul列包括圖片和價(jià)格，按鈕的層級(jí)z-index高于ul列的
- 圖片是一個(gè)ul li列，** ul 相對(duì)定位，使 ul 的 top **屬性改變實(shí)現(xiàn)上下滾動(dòng)
- startMove（oUl, { top:vlaue }），oUL為ul列，vlaue為移動(dòng)的值
- 在左右按鈕上添加事件，左：在當(dāng)前oUL.offsetTop - li 的高度
代碼實(shí)現(xiàn)
//左按鈕事件
//oUl為存放圖片的無序列表
//oLi為oUl內(nèi)的列
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函數(shù)，使用判斷解決到達(dá)臨界值
function tab(){
var vlaue = oUl.offsetTop;
if (vlaue<=-180) {
vlaue=0;
} else {
vlaue=vlaue-60;
}
startMove(oUl,{top:vlaue});
}
//定時(shí)器實(shí)現(xiàn)自動(dòng)滾動(dòng)
timer=setInterval(tab,2000);
//oTuijian為按鈕和ul列的父級(jí)盒子 當(dāng)鼠標(biāo)移動(dòng)上的時(shí)候停止計(jì)時(shí)器
oTuijian.onmouseover=function(){
clearInterval(timer);
};
oTuijian.onmouseout=function(){
timer=setInterval(tab,2000);
};
03 下拉菜單
下拉菜單.gif
CSS代碼實(shí)現(xiàn)
.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;}
- 父級(jí)display 屬性為內(nèi)聯(lián)元素
- 子菜單postion為相對(duì)定位
- 默認(rèn)display為none不顯示
- 當(dāng)鼠標(biāo)移動(dòng)到父級(jí)上的觸發(fā)控件上的時(shí)候 子菜單的display：block;
html代碼
<div class="allBao clear">
<!--觸發(fā)按鈕-->
<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結(jié)束-->
</div>
<!--allBao結(jié)束-->
04 緩沖運(yùn)動(dòng)
JS菜單勻速運(yùn)動(dòng).gif
布局
<div class="allBao clear">
<!--觸發(fā)按鈕-->
<a href="#">所有分類</a>
<!--下拉菜單div-->
<div class="allBao_bd">
<!--菜單列-->
<ul>
<li>
<div class="icon"></div>
<a href="#" id="one_show">所有寶貝</a>
</li>
</ul>
<!--一級(jí)菜單結(jié)束-->
<div class="allBaoBei">
<ul>
<li><a href="#">按銷量</a></li>
<li><a href="#">按人氣</a></li>
<li><a href="#">按價(jià)格</a></li>
</ul>
</div>
<!--allBaoBei結(jié)束-->
</div>
<!--allBao_bd結(jié)束-->
</div>
<!--allBao結(jié)束-->
- allBao的父級(jí)導(dǎo)航條nav是絕對(duì)定位，二級(jí)菜單根據(jù)導(dǎo)航條相對(duì)定位
- 這里我把二級(jí)菜單與一級(jí)菜單ul作為兄弟，也可以與allBao_bd作為兄弟級(jí)，改變的是相對(duì)定位的位置的不同
- 二級(jí)菜單的width初始值為0，當(dāng)鼠標(biāo)移動(dòng)到一級(jí)菜單的時(shí)候改變width的值
- 二級(jí)菜單上記得添加overfllow：hidden，否則里面的內(nèi)容會(huì)直接顯示了
JS代碼
//one_menu是二級(jí)菜單
//one是一級(jí)菜單
//aIcon[0]是二級(jí)菜單的背景圖片
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});
};
- 這里需要注意的是，需要給二級(jí)菜單與一級(jí)菜單上都添加事件，避免從一級(jí)菜單移動(dòng)到二級(jí)菜單時(shí)菜單消失
- 通過修改二級(jí)菜單one_menu的width值，這里的緩沖運(yùn)動(dòng)都是使用運(yùn)動(dòng)函數(shù)寫的
05
總結(jié)一下
運(yùn)用div盒子模型和css代碼樣式與js事件綁定實(shí)現(xiàn)的簡(jiǎn)單網(wǎng)頁。這里重點(diǎn)寫了利用我的上篇文章中總結(jié)的JS運(yùn)動(dòng)框架，可以看出，很多都可以使用那個(gè)實(shí)現(xiàn)。無論是輪播圖片、菜單的顯示、以及背景圖片的位置改變。以及等等。
