时间：2023-09-02 03:12:02 | 来源：网站运营
时间：2023-09-02 03:12:02 来源：网站运营
如何用代码快速制作营销网站底部广告?：当前在很多的旅游网站，底部固定广告已经成为一种常见的形式，可以参看下图。
在线咨询
<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代码来实现两者之间的切换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); }); });关键词：广告
