底端固定不动广告宣传成为一种比较常见的方式

现阶段，在很多旅行网站中，底端固定不动广告宣传已成为一种比较常见的方式，请参阅下面的图。 途牛网底端 携程旅行网底端 以途牛网举例，下面我们就来谈一谈全部加工过程 显而易见，底端是一个固定盒子，分成2组，一组是表明情况，一组是掩藏情况，点击能够实现两者之间的转换 第一组 第二组 1. 建立2组盒子构造，并加上对应的盒子构造css样式 第一组盒子宽100%，精准定位到底端。第二组盒子依据图片尺寸设定盒子尺寸，精准定位在窗户左下方。默认设置前提下，第一组展示在对话框中，第二组清除到对话框左边，所以需要设为负数。CSS一部分编码如下所示： Html一部分编码如下所示： 2. 根据jquery代码实现两者之间的转换 点击事情导入到第一组盒子里的关闭按钮中。点击后，把整个盒子清除到左侧。往左边移动范畴依据宽度和宽度明确，网页页面的宽度依据窗口宽度响应式，因而首先要得到商品窗口宽度。当全部盒子掩藏时，第二组盒子必须从对话框左边进到，这儿使用animate这样的效果是由回调函数达到的。 在第二组盒子中，将点击事情导入到全部盒子中，动漫方法和第一次点击反过来；第二组盒子从左侧移除窗户；第一组盒子从窗户外再次进到窗户，也在这里使用ainimate为了对2组动漫间的这个时间造成间隔，的中间回调函数根据delay延迟时间实行方式。