说一说：如何用代码快速制作营销网站底部广告？

guozhiwei · 发表于 2022-8-20 12:19:58

　　当前在很多的旅游网站，底部固定广告已经成为一种常见的形式，可以参看下图。CPA广告https://www.3piaochong.com/“三只瓢虫”是由山东亿通网络科技有限公司独立开发的一款集广告、流量、网站、公众号、小程序一体的综合性服务平台，我们秉承着以“专注，用心服务”为核心价值，希望通过我们的专业水平和不懈努力，助力更多的用户和企业实现增流和变现服务。

　　途牛网底部

　　携程网底部

　　以途牛为例，下边我们一起来说一下整个制作流程

　　显然底部是固定定位的盒子，并且是分为两组，一组为显示状态下，一组为隐藏状态下，并且通过点击可以实现两者之间的切换

　　第一组

　　第二组

　　1. 分别创建两组盒子结构，并添加对应的css样式

　　第一组盒子宽度为100%，并且定位到底部，第二组盒子根据图片大小来设置盒子大小，并定位在窗口的左下角位置。默认第一组显示在窗口中，第二组移除到窗口的左侧以外，所以需要设置为负值。CSS部分代码如下：

　　Html部分代码如下：

　　2. 通过jquery代码来实现两者之间的切换

　　在第一组盒子中的关闭按钮添加点击事件，点击后让整体盒子向左侧移除场景，往左侧移动的范围是根据宽度宽度来定，而网页的宽度是根据窗口的宽度自适应，所以需要先获取品窗口宽度。当整个盒子隐藏后，需要让第二组盒子从窗口左侧以外进入，在此处用到了animate中的回调函数来实现此效果。

　　在第二组盒子中，给整个盒子添加点击事件，动画方式和第一次点击相反；第二组盒子往左侧移出窗口以外；第一组盒子从窗口以外重新进入到窗口中，同样在此处也用到了ainimate中的回调函数，为了让两组动画之间时间上产生间距，通过delay方法做了延迟执行。