El siguiente caso usa js para implementar un efecto de capa flotante de página y usa js para leer y escribir cookies a través de dos métodos para lograr el estado de visualización del usuario que apaga el anuncio;
Los lectores pueden copiar el siguiente código en un archivo html para probar el efecto. La etiqueta previa de html tiene dos métodos de implementación js;
Copie el código de código de la siguiente manera:
<!TIPO DE DOCUMENTO HTML>
<html>
<cabeza>
<meta content="text/html;charset=utf-8" http-equiv="Tipo de contenido"/>
<meta contenido="Yang Kai" nombre="descripción"/>
<meta nombre="autor" contenido="http://blog.csdn.net/tianyazaiheruan"/>
<meta name="copyright" content="Copyright de Yang Kai"/>
<título>IT_Blog_Yang Kai</título>
</cabeza>
<cuerpo>
<div>
Autor de este artículo: IT_Blog_Yang Kai
Indique la fuente al reimprimir: <a href=”http://blog.csdn.net/yangkai_hudong”>http://blog.csdn.net/yangkai_hudong</a>
</div>
<br>
<div>
<pre>
1. El primero: usar la biblioteca de cookies de jQuery
El ejemplo es el js que se utiliza actualmente. El código relevante es el siguiente:
$(documento).listo(función () {
var adCookie=$.cookie("docCookie");
//Si no hay ninguna cookie localmente, escribe la cookie de entrada localmente
if(adCookie!="adCookie"){
$("#wapDocCookie").show();
}
//Si la cookie de entrada existe localmente, no se mostrará la capa flotante.
if(adCookie=="adCookie"){
$("#wapDocCookie").hide();
}
//Cerrar publicidad y ocultar la capa flotante
$("#closeAd").hacer clic(función(){
$("#wapDocCookie").hide();
$.cookie("docCookie","adDocCookie",{expires:60});
});
});
//biblioteca de cookies jQuery
jQuery.cookie = función (nombre, valor, opciones) {
if (tipo de valor! = 'indefinido') { // nombre y valor proporcionados, establece la cookie
opciones = opciones || {};
si (valor === nulo) {
valor = '';
opciones.expires = -1;
}
var caduca = '';
if (opciones.expires && (tipo de opciones.expires == 'número' || opciones.expires.toUTCString)) {
fecha de variación;
if (tipo de opciones.expires == 'número') {
fecha = nueva Fecha();
fecha.setTime(fecha.getTime() + (opciones.expires * 24 * 60 * 60 * 1000));
} demás {
fecha = opciones.expires;
}
expira = '; expira =' + date.toUTCString(); // usa el atributo de expiración, IE no admite la edad máxima
}
var ruta = opciones.ruta? '; ruta=' + (opciones.ruta): '';
var dominio = opciones.dominio? '; dominio=' + (opciones.dominio): '';
var seguro = opciones.seguro? '; seguro': '';
document.cookie = [nombre, '=', encodeURIComponent(valor), caduca, ruta, dominio, seguro].join('');
} else { // solo se proporciona el nombre, obtiene la cookie
var cookieValue = nulo;
if (documento.cookie && documento.cookie!= '') {
var cookies = document.cookie.split(';');
para (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// ¿Esta cadena de cookies comienza con el nombre que queremos?
if (cookie.substring(0, nombre.longitud + 1) == (nombre + '=')) {
cookieValue = decodeURIComponent(cookie.substring(nombre.longitud + 1));
romper;
}
}
}
devolver valor de cookie;
}
};
2. El segundo tipo: escriba un ejemplo js de cómo operar cookies usted mismo
El js relevante es el siguiente:
$(documento).listo(función() {
función escribirCookie(nombre,valor)
{
var exp = nueva fecha();
exp.setTime(exp.getTime() + 7*24*60*60*1000);
document.cookie = nombre + "="+ escape (valor) + ";expires=" + exp.toGMTString();
}
//Leer cookies
función leerCookie(nombre)
{
var arr,reg=new RegExp("(^| )"+nombre+"=([^;]*)(;|$)");
if(arr=documento.cookie.match(reg)){
devolver unescape(arr[2]);
}demás {
devolver nulo;
}
}
var adCookie = readCookie("adCookie");
if(adCookie!="adCookie"){
$("#wapDocCookie").show();
}
//Si la cookie de entrada existe localmente, no se mostrará la capa flotante.
if(adCookie=="adCookie"){
$("#wapDocCookie").hide();
}
//Cerrar publicidad y ocultar la capa flotante
$("#closeAd").hacer clic(función(){
$("#wapDocCookie").hide();
});
});
</pre>
</div>
<!--Estilo publicitario-->
<tipo de estilo="texto/css">
cuerpo {TEXT-ALIGN: centro;}
#wapDocCookie{fondo-color:rgba(0,0,0,0.7);fondo:#4b4b4b/9;ancho:100%;text-align:center;posición:fija;padding:10px 0 5px 0;bottom:0 ;izquierda:0;}
#bkguancha{fondo:url(http://static.hudong.com/35/86/26100000006141138683868789461.png) sin repetición; tamaño de fondo: 280px; fondo: url (http://static.hudong.com/50/69/26100000006141138683695381873.png) sin repetición 0 -36px/9;alto:46px;ancho:290px;pantalla:bloque en línea;desbordamiento:oculto;alto de línea:99em;}
#closeAd{background:url(http://static.hudong.com/54/88/26100000006141138683883031718.png) sin repetición ;tamaño de fondo:12px;fondo:url(http://static.hudong.com/50/69/26100000006141138683695381873.png) sin repetición -278px 0/9;alto:12px;ancho:12px;pantalla:bloque;posición:absoluta;arriba:5px;derecha:10px;}
<!--Publicidad js -->
</estilo>
<script type="text/javascript" src="http://www.huimg.cn/lib/jquery-1.3.2.js"></script>
<tipo de script="texto/javascript">
$(documento).listo(función () {
var adCookie=$.cookie("docCookie");
//Si no hay ninguna cookie localmente, escribe la cookie de entrada localmente
if(adCookie!="adCookie"){
$("#wapDocCookie").show();
}
//Si la cookie de entrada existe localmente, no se mostrará la capa flotante.
if(adCookie=="adCookie"){
$("#wapDocCookie").hide();
}
//Cerrar publicidad y ocultar la capa flotante
$("#closeAd").hacer clic(función(){
$("#wapDocCookie").hide();
$.cookie("docCookie","adDocCookie",{expires:60});
});
});
//biblioteca de cookies jQuery
jQuery.cookie = función (nombre, valor, opciones) {
if (tipo de valor! = 'indefinido') { // nombre y valor dados, establece la cookie
opciones = opciones || {};
si (valor === nulo) {
valor = '';
opciones.expires = -1;
}
var caduca = '';
if (opciones.expires && (tipo de opciones.expires == 'número' || opciones.expires.toUTCString)) {
fecha de variación;
if (tipo de opciones.expires == 'número') {
fecha = nueva Fecha();
fecha.setTime(fecha.getTime() + (opciones.expires * 24 * 60 * 60 * 1000));
} demás {
fecha = opciones.expires;
}
expira = '; expira =' + date.toUTCString(); // usa el atributo de expiración, IE no admite la edad máxima
}
var ruta = opciones.ruta? '; ruta=' + (opciones.ruta): '';
var dominio = opciones.dominio? '; dominio=' + (opciones.dominio): '';
var seguro = opciones.seguro? '; seguro': '';
document.cookie = [nombre, '=', encodeURIComponent(valor), caduca, ruta, dominio, seguro].join('');
} else { // solo se proporciona el nombre, obtiene la cookie
var cookieValue = nulo;
if (documento.cookie && documento.cookie!= '') {
var cookies = document.cookie.split(';');
para (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// ¿Esta cadena de cookies comienza con el nombre que queremos?
if (cookie.substring(0, nombre.longitud + 1) == (nombre + '=')) {
cookieValue = decodeURIComponent(cookie.substring(nombre.longitud + 1));
romper;
}
}
}
devolver valor de cookie;
}
};
</script>
<div id="wapDocCookie" estilo="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')">Haga clic Descargar</a>
<a id="closeAd" href="javascript:void(0)"> </a>
</div>
</cuerpo>
</html>