当前在很多的旅游网站,底部固定广告已经成为一种常见的形式,可以参看下图。
![65748f1c80c979a04ccc34654cc5c6e3.png](https://i-blog.csdnimg.cn/blog_migrate/6adec5296e19c950715bb36d3c01e927.jpeg)
途牛网底部
![612df30c12c4a03d0f7b79e468566172.png](https://i-blog.csdnimg.cn/blog_migrate/0a51a1f8aa7f41a1e0ce33b17cbb0432.jpeg)
携程网底部
以途牛为例,下边我们一起来说一下整个制作流程
显然底部是固定定位的盒子,并且是分为两组,一组为显示状态下,一组为隐藏状态下,并且通过点击可以实现两者之间的切换
![ac1dd615fe3b223e979a2f069a9c409d.png](https://i-blog.csdnimg.cn/blog_migrate/ab2877ed0f0feed018e67235d4094b24.jpeg)
第一组
![035d11f705f39f6e8bb026d9e44d65f8.png](https://i-blog.csdnimg.cn/blog_migrate/db0136cf24b6e8142f9fa17192b761c6.jpeg)
第二组
1. 分别创建两组盒子结构,并添加对应的css样式
第一组盒子宽度为100%,并且定位到底部,第二组盒子根据图片大小来设置盒子大小,并定位在窗口的左下角位置。默认第一组显示在窗口中,第二组移除到窗口的左侧以外,所以需要设置为负值。CSS部分代码如下:
Html部分代码如下:
![adv.png](images/adv.png)
![btn_close.png](images/btn_close.png)
![people.png](images/people.png)
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);});});