前幾天根據(jù)學(xué)習(xí)的知識整理的JS運(yùn)動框架，這里直接引用JS運(yùn)動框架，頁面主要是實(shí)現(xiàn)css網(wǎng)頁布局與JS運(yùn)動、事件，隨便找了一個(gè)某寶上的店鋪借鑒

簡書.gif

傳送門

JS運(yùn)動搞不定，你缺少一個(gè)框架而已
這里引用的JS 沒整明白的可以去看一下

01總體布局

CSS布局

• 采用盒子嵌套布局 使用magrin：0 auto;實(shí)現(xiàn)div的居中
• 涉及到div的浮動，浮動元素的父級需要清除浮動
• 使用CSS代碼裝飾時(shí)，可以將div的border打印出來驗(yàn)證，以免發(fā)生錯誤

02 圖片滾動

商品推薦（ul）.gif

• 這是一個(gè)很典型的利用運(yùn)動框架寫的圖片上下滾動
• 定時(shí)器實(shí)現(xiàn)自動滾動
• ul列包括圖片和價(jià)格，按鈕的層級z-index高于ul列的
• 圖片是一個(gè)ul li列，** ul 相對定位，使 ul 的 top **屬性改變實(shí)現(xiàn)上下滾動
• startMove（oUl, { top:vlaue }），oUL為ul列，vlaue為移動的值
• 在左右按鈕上添加事件，左：在當(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)自動滾動
timer=setInterval(tab,2000);  
//oTuijian為按鈕和ul列的父級盒子 當(dāng)鼠標(biāo)移動上的時(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;}

• 父級display 屬性為內(nèi)聯(lián)元素
• 子菜單postion為相對定位
• 默認(rèn)display為none不顯示
• 當(dāng)鼠標(biāo)移動到父級上的觸發(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)動

JS菜單勻速運(yùn)動.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>
        <!--一級菜單結(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的父級導(dǎo)航條nav是絕對定位，二級菜單根據(jù)導(dǎo)航條相對定位
• 這里我把二級菜單與一級菜單ul作為兄弟，也可以與allBao_bd作為兄弟級，改變的是相對定位的位置的不同
• 二級菜單的width初始值為0，當(dāng)鼠標(biāo)移動到一級菜單的時(shí)候改變width的值
• 二級菜單上記得添加overfllow：hidden，否則里面的內(nèi)容會直接顯示了

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});          
};

• 這里需要注意的是，需要給二級菜單與一級菜單上都添加事件，避免從一級菜單移動到二級菜單時(shí)菜單消失
• 通過修改二級菜單one_menu的width值，這里的緩沖運(yùn)動都是使用運(yùn)動函數(shù)寫的

05

總結(jié)一下

運(yùn)用div盒子模型和css代碼樣式與js事件綁定實(shí)現(xiàn)的簡單網(wǎng)頁。這里重點(diǎn)寫了利用我的上篇文章中總結(jié)的JS運(yùn)動框架，可以看出，很多都可以使用那個(gè)實(shí)現(xiàn)。無論是輪播圖片、菜單的顯示、以及背景圖片的位置改變。以及等等。