您的位置：首页 > 运维架构 > 网站架构

网站广告弹出层（每天弹出一次）

2015-07-31 16:36 260 查看

网站广告弹出层（每天弹出一次）

可以有两种做法

一、是标识符存入数据库

二、利用Jquery.cookie

我这里做的是比较简单的用到的知识是Jquery.cookie,

这里要注意的一点是jquery.cookie的值火狐能够获取，IE,360,谷歌不能直接获取到值，所以测试的时候最好用FF，你只需要把代码放到服务器上其它浏览器就可以完美生效了呢。

HTML 代码如下，亲测。

=======================================================================================

<html>

<head>

<script src="http://www.erdangjiade.com/Public/Home/js/jquery.min.js"></script>

<style>

/*全局广告样式Start*/

#globalAd{ width:600px; height:400px; overflow:hidden;position:fixed;display:none;margin:0 auto;z-index:10001}

.layer{width:100%; height:100%; position:fixed; top:0px;left:0px;filter:alpha(opacity=50);opacity:0.5;background:#000;z-index:1000;display:none}

.globalContent{width:600px; height:400px;}

.globalContent img{max-width: 600px;height: 400px;}

.closeIco{width:400px;height:50px;margin-left: 20px;position: absolute;left: 345px;cursor:pointer;background:url("http://pics.rebatesme.com/newrm/images/cha.png") no-repeat scroll 190px 0;}

/*全局广告样式End*/

</style>

</head>

<body>

<div style="width:2000px;height:2500px;background:#fcc;"></div>



<div class="layer"></div>

<div id="globalAd">

<span onclick="closeGlobalAd();" class="closeIco"></span>

<a href='http://www.erdangjiade.com' target="_blank" class="globalContent" onclick="redirectUrlToActive();"><img src="http://www.erdangjiade.com/Public/Home/images/logo.png"/></a>

</div>



</body>

</html>

<script>

/*全局广告开始*/

//=================================================================jquery.cookie Start=======================================

jQuery.cookie = function(name, value, options) {

if (typeof value != 'undefined') { // name and value given, set cookie

options = options || {};

if (value === null) {

value = '';

options.expires = -1;

}

var expires = '';

if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {

var date;

if (typeof options.expires == 'number') {

date = new Date();

var totalTime = 24*3600;

/*var totalTime=(1440-79)*60;*/

var hour=date.getHours();

var minutes=date.getMinutes();

var seconds=date.getSeconds();

var pastTime=3600*hour + 60*minutes + seconds;

var leftTime=totalTime-pastTime;

date.setTime(date.getTime() + (options.expires *
leftTime * 1000));

} else {

date = options.expires;

}

expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE

}

// CAUTION: Needed to parenthesize options.path and options.domain

// in the following expressions, otherwise they evaluate to undefined

// in the packed version for some reason...

var path = options.path ? '; path=' + (options.path) : '';

var domain = options.domain ? '; domain=' + (options.domain) : '';

var secure = options.secure ? '; secure' : '';

document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');

} else { // only name given, get cookie

var cookieValue = null;

if (document.cookie && document.cookie != '') {

var cookies = document.cookie.split(';');

for (var i = 0; i < cookies.length; i++) {

var cookie = jQuery.trim(cookies[i]);

// Does this cookie string begin with the name we want?

if (cookie.substring(0, name.length + 1) == (name + '=')) {

cookieValue = decodeURIComponent(cookie.substring(name.length + 1));

break;

}

}

}

return cookieValue;

}

};

//================================================================jquery.cookie End===========================================================================

$(function() {

//Set the popup window to center

var COOKIE_NAME = "erdangjiade";

if($.cookie(COOKIE_NAME)){

$(".layer").hide();

$("#globalAd").hide();

}else{

var erdangjiadeH = $(window).height();

var erdangjiadeW = $(window).width();

$(".layer").show();

$("#globalAd").css({'top': erdangjiadeH/2-$("#globalAd").height()/2,'left': erdangjiadeW/2-$("#globalAd").width()/2 });

$("#globalAd").slideDown(300, function() {

setTimeout("closeGloableAd()", '300000');

});

$.cookie(COOKIE_NAME,"erdangjiade", {path: '/', expires: 1});

}

});

//关闭全局广告方法

function closeGlobalAd(){

$('#globalAd').hide();

$('.layer').hide();

}

//跳转广告方法

function redirectUrlToActive(){

$('#globalAd').hide();

$('.layer').hide();

}

/*全局广告结束*/

</script>

=========================================================================

一起交流学习找工作请加群：上海web开发群：368848856

二当家的资料学习请访问：www.erdangjiade.com(二当家的）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航