怎么CSS+Cookie实现固定页脚广告条

发布时间:2021-08-07 18:10:58 作者:chen
来源:亿速云 阅读:191

本篇内容主要讲解“怎么CSS+Cookie实现固定页脚广告条”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么CSS+Cookie实现固定页脚广告条”吧!

经常看到有些网站为了吸引用户注意,在页面底部放置固定横幅广告,用户滚动页面时,横幅广告一直固定在页底,并不随页面滚动而滚动,当然一般允许用户可以关闭广告条,并设置一定时间内不再显示此广告条。本文将介绍使用CSS+Cookie来实现这一效果。

HTML

首先,我们将横幅广告的html代码放到页面最底部,因为是最后加载的。也可以使用外部js动态插入到页面底部。整个HTML结构由遮罩层.float_layer,内容层.float_content组成,其中.float_bg为广告部分,内容可以是图片、文字等任意形式的html元素,.float_close是关闭按钮,用户不喜欢广告可以关闭展示。

<p class="float_mask" id="float_mask">    <p class="float_layer">    </p>    <p class="float_content clearfix">        <p class="float_bg">            <a target="_blank" href="http://www.xuebuyuan.com/" title='广告部分'>                <p class="float_slogan"><!--广告内容--></p>            </a>        </p>        <p class="float_close">            <a onclick="closeFootAd()" href="#" title="我知道了"></a>        </p>    </p> </p>

CSS

我们使用CSS将广告条固定在页脚,以及展示半透明遮罩效果、广告关闭按钮等效果。我们知道position: fixed是固定元素位置,配合bottom、right等属性可以将元素固定在页面某个位置,并不随页面滚动而滚动。使用opacity属性可以实现透明效果。我们给.float_slogan一个background属性,将广告图片作为背景加入,当然你也可以不需要这样做,直接在上面的html中加入图片或文字。

.float_mask{position: fixed;z-index: 19999;display:none;width: 100%;right: 0; bottom: 0;height: 105px;_bottom: auto;_width: 100%;_position: absolute; _top: expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));} .float_layer{position: absolute;left: 0;top: 0;z-index: 1;width: 100%;height: 100%;background: #071828;filter: alpha(opacity=80);opacity: 0.80;} .float_content{ position: relative;z-index: 2;width: 1005px;height: 100%;margin: 0 auto;padding-left: 70px;} .float_bg, .float_close{ float: left;} .float_bg{position: relative;width: 820px;height: 135px;margin-top: -27px;} .float_slogan {position: absolute; background: url("footer_ad.png") 0 0 no-repeat;} .float_slogan{left: 0;bottom: 0;width: 800px;height: 135px;cursor: pointer;} .float_close{width: 60px;margin-top: 30px;} .float_close a {display: block;width: 53px; height: 52px; margin-left: 7px; background: url("close.png") 0 0 no-repeat;-webkit-transition: all 400ms;}

JAVASCRIPT

我们初次打开页面时,Javascript先去检测页底横幅广告关联的cookie信息,如果cookie表示的信息是关闭的,则不显示页底广告,反之显示页底广告。我们在点击关闭按钮的时候会调用closeFootAd()函数,点击关闭按钮,则将广告条隐藏,即关闭,并设置cookie相关值。以下是整个javascript的操作代码:

window.onload = function(){ if(getCookie("footad")==0){ document.getElementById("float_mask").style.display="none"; }else{ document.getElementById("float_mask").style.display="block"; } } //关闭底部广告 function closeFootAd() { document.getElementById("float_mask").style.display="none"; setCookie("footad","0"); }   //设置cookie function setCookie(name,value){    var exp = new Date();      exp.setTime(exp.getTime() + 1*60*60*1000);//有效期1小时    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); } //取cookies函数 function getCookie(name){    var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));    if(arr != null) return unescape(arr[2]); return null; }

到此,相信大家对“怎么CSS+Cookie实现固定页脚广告条”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

推荐阅读:
  1. Android Banner 广告条
  2. 如何使用javascript实现循环广告条效果

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css cookie

上一篇:怎么用CSS实现帮助提示信息效果

下一篇:如何解决某些HTML字符打不出来的问题

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》