这篇文章给大家聊聊关于网站广告源码，以及如何用代码快速制作营销网站底部广告对应的知识点，希望对各位有所帮助，不要忘了收藏本站哦。
途牛网底部
携程网底部
以途牛为例，下边我们一起来说一下整个制作流程
显然底部是固定定位的盒子，并且是分为两组，一组为显示状态下，一组为隐藏状态下，并且通过点击可以实现两者之间的切换
第一组
第二组
1.分别创建两组盒子结构，并添加对应的css样式
第一组盒子宽度为100%，并且定位到底部，第二组盒子根据图片大小来设置盒子大小，并定位在窗口的左下角位置。默认第一组显示在窗口中，第二组移除到窗口的左侧以外，所以需要设置为负值。CSS部分代码如下：
<styletype=&34;>\n*{margin:0;padding:0;}\nbody{background:url(&39;)no-repeatcentertop;}\n.box{width:100%;height:147px;position:fixed;bottom:0;left:0;background:rgba(0,5,25,.8);}\n.box-inner{width:1000px;height:147px;margin:0auto;position:relative;}\n.box-inner.person{position:absolute;left:0;bottom:0;}\n.box-inner.btn{position:absolute;left:0;top:5px;cursor:pointer;}\n.people{position:fixed;left:-130px;bottom:0;cursor:pointer;}\n</style>
Html部分代码如下：
<divclass=&34;>\n\t<divclass=&34;>\n\t\t<imgclass=&34;src=&34;height=&34;width=&34;alt=&34;/>\n\t\t<imgsrc=&34;height=&34;width=&34;alt=&34;class=&34;/>\n\t</div>\t\n</div>\n<divclass=&34;>\n\t<imgsrc=&34;height=&34;width=&34;alt=&34;/>\n</div>
2.通过jquery代码来实现两者之间的切换
在第一组盒子中的关闭按钮添加点击事件，点击后让整体盒子向左侧移除场景，往左侧移动的范围是根据宽度宽度来定，而网页的宽度是根据窗口的宽度自适应，所以需要先获取品窗口宽度。当整个盒子隐藏后，需要让第二组盒子从窗口左侧以外进入，在此处用到了animate中的回调函数来实现此效果。
varwinWidth=$(window).width();\n$(&39;).click(function(event){\n\t$(&39;).animate({left:-winWidth},500,function(){\n\t\t\t$(&39;).animate({left:0},500);\n});\n});
END，本文到此结束，如果可以帮助到大家，还望关注本站哦！