途牛網(wǎng)底部

攜程網(wǎng)底部

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

顯然底部是固定定位的盒" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 在線咨詢 在線咨詢
15158846557 在線咨詢
所在位置: 首頁 > 營銷資訊 > 網(wǎng)站運(yùn)營 > 如何用代碼快速制作營銷網(wǎng)站底部廣告?

如何用代碼快速制作營銷網(wǎng)站底部廣告?

時(shí)間:2023-09-02 03:12:02 | 來源:網(wǎng)站運(yùn)營

時(shí)間:2023-09-02 03:12:02 來源:網(wǎng)站運(yùn)營

如何用代碼快速制作營銷網(wǎng)站底部廣告?:當(dāng)前在很多的旅游網(wǎng)站,底部固定廣告已經(jīng)成為一種常見的形式,可以參看下圖。

途牛網(wǎng)底部

攜程網(wǎng)底部

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

顯然底部是固定定位的盒子,并且是分為兩組,一組為顯示狀態(tài)下,一組為隱藏狀態(tài)下,并且通過點(diǎn)擊可以實(shí)現(xiàn)兩者之間的切換




第一組




第二組

1. 分別創(chuàng)建兩組盒子結(jié)構(gòu),并添加對(duì)應(yīng)的css樣式

第一組盒子寬度為100%,并且定位到底部,第二組盒子根據(jù)圖片大小來設(shè)置盒子大小,并定位在窗口的左下角位置。默認(rèn)第一組顯示在窗口中,第二組移除到窗口的左側(cè)以外,所以需要設(shè)置為負(fù)值。CSS部分代碼如下:

<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>Html部分代碼如下:

<div class="box"> <div class="box-inner"> <img class="person" src="images/adv.png" height="195" width="1000" alt="" /> <img src="images/btn_close.png" height="39" width="39" alt="" class="btn" /> </div> </div><div class="people"> <img src="images/people.png" height="154" width="130" alt="" /></div>2. 通過jquery代碼來實(shí)現(xiàn)兩者之間的切換

在第一組盒子中的關(guān)閉按鈕添加點(diǎn)擊事件,點(diǎn)擊后讓整體盒子向左側(cè)移除場景,往左側(cè)移動(dòng)的范圍是根據(jù)寬度寬度來定,而網(wǎng)頁的寬度是根據(jù)窗口的寬度自適應(yīng),所以需要先獲取品窗口寬度。當(dāng)整個(gè)盒子隱藏后,需要讓第二組盒子從窗口左側(cè)以外進(jìn)入,在此處用到了animate中的回調(diào)函數(shù)來實(shí)現(xiàn)此效果。

var winWidth = $(window).width();$('.btn').click(function(event) { $('.box').animate({left:-winWidth}, 500,function(){ $('.people').animate({left:0}, 500); });}); 在第二組盒子中,給整個(gè)盒子添加點(diǎn)擊事件,動(dòng)畫方式和第一次點(diǎn)擊相反;第二組盒子往左側(cè)移出窗口以外;第一組盒子從窗口以外重新進(jìn)入到窗口中,同樣在此處也用到了ainimate中的回調(diào)函數(shù),為了讓兩組動(dòng)畫之間時(shí)間上產(chǎn)生間距,通過delay方法做了延遲執(zhí)行。

$('.people').click(function(event) { $(this).animate({left:-130}, 0,function(){ $('.box').delay(300).animate({left:0}, 500); }); });



















關(guān)鍵詞:廣告

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果,本站不支持IE9及以下版本的瀏覽器,建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉