<output id="cuifj"><form id="cuifj"></form></output>
<var id="cuifj"><strike id="cuifj"><small id="cuifj"></small></strike></var>
        1. <code id="cuifj"></code>
          1. <var id="cuifj"><rt id="cuifj"><big id="cuifj"></big></rt></var>
          2. <input id="cuifj"><rt id="cuifj"></rt></input>
                Java人工智能+Pythonweb前端UI/UE設計PHP+H5全棧工程師C/C++云計算大數據新媒體軟件測試產品經理電商運營網絡安全+運維Go語言與區塊鏈影視制作PMP項目管理認證iOSAndroid+物聯網.NET

                如何快速制作營銷網站底部廣告?

                來源:黑馬程序員

                瀏覽43人

                2019.08.05

                當前在很多的旅游網站,底部固定廣告已經成為一種常見的形式,可以參看下圖。

                1.png

                途牛網底部

                2.png

                攜程網底部

                以途牛為例,下邊我們一起來說一下整個制作流程

                    顯然底部是固定定位的盒子,并且是分為兩組,一組為顯示狀態下,一組為隱藏狀態下,并且通過點擊可以實現兩者之間的切換

                3.png

                第一組

                1564998628823843.jpg

                . 分別創建兩組盒子結構,并添加對應的css樣式

                    第一組盒子寬度為100%,并且定位到底部,第二組盒子根據圖片大小來設置盒子大小,并定位在窗口的左下角位置。默認第一組顯示在窗口中,第二組移除到窗口的左側以外,所以需要設置為負值。

                <style type="text/css">

                *{margin:0;padding:0;}

                body{background: url('images/body-bg.png') no-repeat center top;}

                .box{width: 100%;height: 147px;position: fixed;bottom: 0;left: 0;background: rgba(0, 5, 25,.8);}

                .box-inner{width:1000px;height:147px;margin:0 auto;position:relative;}

                .box-inner .person{position: absolute;left:0;bottom:0;}

                .box-inner .btn{position: absolute;left:0;top: 5px;cursor: pointer;}

                .people{position: fixed;left:-130px;bottom: 0;cursor: pointer;}

                </style>

                Css部分

                <div>

                <div>

                <img src="images/adv.png" height="195" width="1000" alt="" />

                <img src="images/btn_close.png" height="39" width="39" alt="" />

                </div>

                </div>

                <div>

                <img src="images/people.png" height="154" width="130" alt="" />

                </div>

                Html部分

                2. 通過jquery代碼來實現兩者之間的切換

                    在第一組盒子中的關閉按鈕添加點擊事件,點擊后讓整體盒子向左側移除場景,往左側移動的范圍是根據寬度寬度來定,而網頁的寬度是根據窗口的寬度自適應,所以需要先獲取品窗口寬度。當整個盒子隱藏后,需要讓第二組盒子從窗口左側以外進入,在此處用到了animate中的回調函數來實現此效果。

                var winWidth = $(window).width();

                $('.btn').click(function(event) {

                $('.box').animate({left:-winWidth}, 500,function(){

                $('.people').animate({left:0}, 500);

                     });

                });

                    在第二組盒子中,給整個盒子添加點擊事件,動畫方式和第一次點擊相反;第二組盒子往左側移出窗口以外;第一組盒子從窗口以外重新進入到窗口中,同樣在此處也用到了ainimate中的回調函數,為了讓兩組動畫之間時間上產生間距,通過delay方法做了延遲執行。

                $('.people').click(function(event) {

                $(this).animate({left:-130}, 0,function(){

                $('.box').delay(300).animate({left:0}, 500);

                });

                });

                收藏文章

                分享

                分享到:QQ空間新浪微博騰訊微博人人網微信
                在線咨詢 我要報名
                热热色原网站