tft每日頭條

 > 科技

 > 微信公衆号廣告盈利模式

微信公衆号廣告盈利模式

科技 更新时间:2024-12-23 15:51:23

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

微信公衆号廣告盈利模式(如何用代碼快速制作營銷網站底部廣告)1

途牛網底部

微信公衆号廣告盈利模式(如何用代碼快速制作營銷網站底部廣告)2

攜程網底部

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

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

微信公衆号廣告盈利模式(如何用代碼快速制作營銷網站底部廣告)3

第一組

微信公衆号廣告盈利模式(如何用代碼快速制作營銷網站底部廣告)4

第二組

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

第一組盒子寬度為100%,并且定位到底部,第二組盒子根據圖片大小來設置盒子大小,并定位在窗口的左下角位置。默認第一組顯示在窗口中,第二組移除到窗口的左側以外,所以需要設置為負值。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代碼來實現兩者之間的切換

在第一組盒子中的關閉按鈕添加點擊事件,點擊後讓整體盒子向左側移除場景,往左側移動的範圍是根據寬度寬度來定,而網頁的寬度是根據窗口的寬度自适應,所以需要先獲取品窗口寬度。當整個盒子隐藏後,需要讓第二組盒子從窗口左側以外進入,在此處用到了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); }); });

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关科技资讯推荐

热门科技资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved