jQuery+cookie仿苏宁每天首页出现广告弹出层【原创

来源:https://www.sucaihuo.com/js/715.html 2016-01-28 20:11浏览(3668) 收藏

在项目中经常遇到首页每天出现弹出层广告,一般我们用PHP或cookie插件http://www.sucaihuo.com/js/89.html来设置时间。今天站长用简单的cookie函数来做一个这样的基于jQuery的广告DEMO。
jQuery+cookie仿苏宁每天首页出现广告弹出层
分类:悬浮层/弹出层 > 弹窗 难易:中级
查看演示 下载资源 下载积分: 60 积分

弹出层图片、关闭按钮.new_close以及苏宁网页ifrmae

<div class="new_user"  id="new_user">
    <div class="new_pic">
        <a target="_blank" href="http://sucaihuo.com">
            <img alt="素材火大背景图片" src="images/pic.png">
        </a>
    </div>
    <span class="new_close" onclick="hideNewUser()"></span>
</div>
<div class="overlay" id="overlay"></div>
<iframe src="http://www.sucaihuo.com/modals/4/444/demo/" width="100%" height="100%" scrolling="yes"/>

jQuery+cookie设置每天弹出一次广告,关闭后不再显示

var is_first = getCookie("is_first");
if (is_first != 1) {
    showNewUser();
    var time = getTodayOtherTime(); //每天一次
    setCookie("is_first", 1, time);//3600 * 24 有效期一天
} else {
    hideNewUser();
}

//设置cookies函数

function setCookie(name, value, time) { //name:cookie键名,value:cookie键值,和时间S
    var exp = new Date();
    exp.setTime(exp.getTime() + time * 1000);//有效期1小时 
    document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
}

//从当前时间到明日0点的时间戳

function getTodayOtherTime() {
    var today = new Date();
    today.setHours(0);
    today.setMinutes(0);
    today.setSeconds(0);
    today.setMilliseconds(0);
    //明日0点时间戳
    var tomorrow_0 = today.getTime() / 1000 + (24 * 3600);
    var current_time = Math.round(new Date().getTime() / 1000);
    var expire = tomorrow_0 - current_time;
    return expire;
}

显示广告

function showNewUser() {
    var document_height = $(document).height();
    var window_height = $(window).height();
    var height = document_height > window_height ? document_height : window_height;
    $("#overlay").css({"height": height, "display": "block"})
    $("#new_user").show();
}

隐藏广告并关闭背景遮罩层

function hideNewUser() {
    $("#new_user").hide();
    $("#overlay").css({"display": "none"})
}
声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:https://www.sucaihuo.com/js/715.html
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2