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

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

在项目中经常遇到首页每天出现弹出层广告,一般我们用PHP或cookie插件http://www.sucaiq.com/texiao/89.html来设置时间。今天站长用简单的cookie函数来做一个这样的基于jQuery的广告DEMO。

淘建站为您提供更多_悬浮层/弹出层_弹窗_cookie_弹出层,在此特别感谢您对我们的支持与厚爱!

查看演示

演示不了,点击反馈

加入收藏

下载 383 次

打赏作者

觉得不错,可打赏下作者

下载资源

免费共享

特别说明:本站资源来自网友发布分享,仅供学习与参考,请勿用于商业用途,若有侵权请联系删除(272966172@qq.com)。

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

<div class="new_user"  id="new_user">
    <div class="new_pic">
        <a target="_blank" href="http://sucaiq.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.sucaiq.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"})
}

声明:本资料由淘建站会员提供,如转载注明来源,资料来源淘建站免费素材库:https://www.taojz.cn/texiao/715.html
jQuery+cookie仿苏宁每天首页出现广告弹出层 希望对你有帮助,感谢您的支持!
  • layer演示5种通用的手机弹出层

    layer演示5种通用的手机弹出层

  • jQuery网页底部阴影浮动层文字滚动

    jQuery网页底部阴影浮动层文字滚动

  • jquery顶部带弹簧效果弹出层点击click事件文本弹跳框

    jquery顶部带弹簧效果弹出层点击click事件文本弹跳框

  • jquery仿百度首页背景换肤代码

    jquery仿百度首页背景换肤代码

  • 京东首页轮播以及电梯特效手写js代码

    京东首页轮播以及电梯特效手写js代码

  • 淘宝首页轮播

    淘宝首页轮播

  • jQuery仿淘宝橱窗位广告图片选项卡代码

    jQuery仿淘宝橱窗位广告图片选项卡代码

  • jQuery使用Cookie和JSON记录用户浏览历史

    jQuery使用Cookie和JSON记录用户浏览历史

  • jQuery点击遮罩弹出层固定网页中间

    jQuery点击遮罩弹出层固定网页中间

  • jquery CSS3制作简洁遮罩弹出层动画代码

    jquery CSS3制作简洁遮罩弹出层动画代码

  • jQuery仿爱奇艺广告图片左右切换手风琴特效

    jQuery仿爱奇艺广告图片左右切换手风琴特效

  • jquery colorbox弹出层插件制作图片弹出显示代码

    jquery colorbox弹出层插件制作图片弹出显示代码

  • 留言(0)
    头像
     阿里云限量代金券,戳我领取
    1 2