O caso a seguir usa js para implementar um efeito de camada flutuante de página e usa js para ler e gravar cookies por meio de dois métodos para obter o status de exibição do usuário desligando o anúncio;
Os leitores podem copiar o código a seguir em um arquivo html para testar o efeito. A pré-tag do html possui dois métodos de implementação js;
Copie o código do código da seguinte forma:
<!DOCTYPEHTML>
<html>
<cabeça>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
<meta content="Yang Kai" name="descrição"/>
<meta name="autor" content="http://blog.csdn.net/tianyazaiheruan"/>
<meta name="copyright" content="Direitos autorais de Yang Kai"/>
<title>IT_Blog_Yang Kai</title>
</head>
<corpo>
<div>
Autor deste artigo: IT_Blog_Yang Kai
Por favor, indique a fonte ao reimprimir: <a href=”http://blog.csdn.net/yangkai_hudong”>http://blog.csdn.net/yangkai_hudong</a>
</div>
<br>
<div>
<pré>
1. O primeiro: usando a biblioteca de cookies do jQuery
O exemplo é o js que está sendo usado atualmente. O código relevante é o seguinte:
$(documento).ready(função(){
var adCookie=$.cookie("docCookie");
//Se não houver cookie localmente, escreva a entrada cookie localmente
if(adCookie!="adDocCookie"){
$("#wapDocCookie").show();
}
//Se o cookie de entrada existir localmente, a camada flutuante não será exibida.
if(adCookie=="adDocCookie"){
$("#wapDocCookie").hide();
}
//Fecha a publicidade e oculta a camada flutuante
$("#closeAd").click(function(){
$("#wapDocCookie").hide();
$.cookie("docCookie","adDocCookie",{expira:60});
});
});
//biblioteca de cookies jQuery
jQuery.cookie = function(nome, valor, opções) {
if (typeof value! = 'indefinido') { // nome e valor fornecidos, definir cookie
opções = opções || {};
if (valor === nulo) {
valor = '';
opções.expire = -1;
}
var expira = '';
if (options.expires && (typeof options.expires == 'número' || options.expires.toUTCString)) {
var data;
if (typeof options.expires == 'número') {
data = nova Data();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
} outro {
data = opções.expira;
}
expires = '; expires=' + date.toUTCString(); // usa o atributo expira, idade máxima não é suportada pelo IE
}
var caminho = opções.caminho ';
var domínio = opções.domínio? '; domínio =' + (opções.domínio): '';
var seguro = opções.secure ';
document.cookie = [nome, '=', encodeURIComponent(valor), expira, caminho, domínio, seguro].join('');
} else { // apenas nome fornecido, obtém 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]);
// Essa string de cookie começa com o nome que queremos?
if (cookie.substring(0, nome.comprimento + 1) == (nome + '=')) {
cookieValue = decodeURIComponent(cookie.substring(nome.comprimento + 1));
quebrar;
}
}
}
return cookieValor;
}
};
2. O segundo tipo: escreva você mesmo um exemplo js de operação de cookies
O js relevante é o seguinte:
$(documento).ready(function() {
função writeCookie(nome,valor)
{
var exp = new Data();
exp.setTime(exp.getTime() + 7*24*60*60*1000);
document.cookie = nome + "="+ escape (valor) + ";expires=" + exp.toGMTString();
}
//Lê cookies
função readCookie(nome)
{
var arr,reg=new RegExp("(^| )"+nome+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg)){
return unscape(arr[2]);
}outro {
retornar nulo;
}
}
var adCookie = readCookie("adCookie");
if(adCookie!="adDocCookie"){
$("#wapDocCookie").show();
}
//Se o cookie de entrada existir localmente, a camada flutuante não será exibida.
if(adCookie=="adDocCookie"){
$("#wapDocCookie").hide();
}
//Fecha a publicidade e oculta a camada flutuante
$("#closeAd").click(function(){
$("#wapDocCookie").hide();
});
});
</pré>
</div>
<!--Estilo de publicidade-->
<style type="texto/css">
corpo {TEXT-ALIGN: centro;}
#wapDocCookie{cor de fundo:rgba(0,0,0,0.7);fundo:#4b4b4b/9;largura:100%;alinhamento de texto:centro;posição:fixo;preenchimento:10px 0 5px 0;fundo:0 ;esquerda:0;}
#bkguancha{plano de fundo:url(http://static.hudong.com/35/86/26100000006141138683868789461.png) sem repetição; tamanho do plano de fundo: 280px; plano de fundo: url (http://static.hudong.com/50/69/26100000006141138683695381873.png) sem repetição 0 -36px/9;altura:46px;largura:290px;exibição:bloco embutido;estouro:oculto;altura da linha:99em;}
#closeAd{background:url(http://static.hudong.com/54/88/26100000006141138683883031718.png) sem repetição ;tamanho de fundo:12px;fundo:url(http://static.hudong.com/50/69/26100000006141138683695381873.png) sem repetição -278px 0/9;altura:12px;largura:12px;exibição:bloco;posição:absoluta;topo:5px;direita:10px;}
<!--Publicidade js -->
</estilo>
<script type="text/javascript" src="http://www.huimg.cn/lib/jquery-1.3.2.js"></script>
<script type="texto/javascript">
$(documento).ready(função(){
var adCookie=$.cookie("docCookie");
//Se não houver cookie localmente, escreva a entrada cookie localmente
if(adCookie!="adDocCookie"){
$("#wapDocCookie").show();
}
//Se o cookie de entrada existir localmente, a camada flutuante não será exibida.
if(adCookie=="adDocCookie"){
$("#wapDocCookie").hide();
}
//Fecha a publicidade e oculta a camada flutuante
$("#closeAd").click(function(){
$("#wapDocCookie").hide();
$.cookie("docCookie","adDocCookie",{expira:60});
});
});
//biblioteca de cookies jQuery
jQuery.cookie = function(nome, valor, opções) {
if (typeof value! = 'indefinido') { // nome e valor fornecidos, definir cookie
opções = opções || {};
if (valor === nulo) {
valor = '';
opções.expire = -1;
}
var expira = '';
if (options.expires && (typeof options.expires == 'número' || opções.expires.toUTCString)) {
var data;
if (typeof options.expires == 'número') {
data = nova Data();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
} outro {
data = opções.expira;
}
expires = '; expires=' + date.toUTCString(); // usa o atributo expira, idade máxima não é suportada pelo IE
}
var caminho = opções.caminho ';
var domínio = opções.domínio? '; domínio =' + (opções.domínio): '';
var seguro = opções.secure ';
document.cookie = [nome, '=', encodeURIComponent(valor), expira, caminho, domínio, seguro].join('');
} else { // apenas nome fornecido, obtém 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]);
// Essa string de cookie começa com o nome que queremos?
if (cookie.substring(0, nome.comprimento + 1) == (nome + '=')) {
cookieValue = decodeURIComponent(cookie.substring(nome.comprimento + 1));
quebrar;
}
}
}
return cookieValor;
}
};
</script>
<div id="wapDocCookie" style="display: none;">
<a id="bkguancha" href="http://www.baike.com/api.php?m=guancha&a=download" onclick="StatVirtualTraffic(document.referrer,window.location,'stat_hdstat_onclick_survey_wap_doc_foot_download')">Clique Baixar</a>
<a id="closeAd" href="javascript:void(0)"> </a>
</div>
</body>
</html>