Hoy en día, muchos anuncios de sitios web están en pleno apogeo. Ahora presentaré el uso del código del efecto publicitario flotante pareado común. El efecto introducido se puede mostrar normalmente con una resolución de 1024 * 768 y se puede mostrar con una resolución de 800 * 600. Ocultar automáticamente para evitar bloquear la página y afectar el contenido de navegación de los visitantes. El siguiente es el código necesario para lograr el efecto.
vardelta=0.015
colección de var;
flotadores de función() {
this.items = [];
this.addItem = función(id,x,y,contenido)
{
document.write('<DIV id='+id+' style="Z-INDEX: 0; POSICIÓN: absoluta; ancho:80px; alto:60px;izquierda:'+(typeof(x)=='string'?eval (x):x)+';top:'+(typeof(y)=='string'?eval(y):y)+'">'+content+'</DIV>');
var nuevoItem = {};
newItem.object = document.getElementById(id);
nuevoItem.x = x;
newItem.y = y;
this.items[this.items.length] = newItem;
}
this.play = función()
{
colección = this.items
setInterval('reproducir()',10);
}
}
función de juego()
{
si(pantalla.ancho<=800)
{
for(var i=0;i<colección.longitud;i++)
{
colección[i].object.style.display = 'ninguno';
}
devolver;
}
for(var i=0;i<colección.longitud;i++)
{
var followObj = colección[i].objeto;
var followObj_x = (typeof(colección[i].x)=='cadena'?eval(colección[i].x):colección[i].x);
var followObj_y = (typeof(collection[i].y)=='string'?eval(collection[i].y):colección[i].y);
if(followObj.offsetLeft!=(document.body.scrollLeft) +seguirObj_x)) {
var dx=(document.body.scrollLeft+followObj_x-followObj.offsetLeft)*delta;
dx=(dx>0?1:-1)*Math.ceil(Math.abs(dx));
seguirObj.style.left=followObj.offsetLeft+dx;
}
if(followObj.offsetTop!=(document.body.scrollTop+followObj_y)) {
var dy=(document.body.scrollTop+followObj_y-followObj.offsetTop)*delta;
dy=(dy>0?1:-1)*Math.ceil(Math.abs(dy));
followObj.style.top=followObj.offsetTop+dy;
}
seguirObj.style.display = '';
}
}
var theFloaters = nuevos flotadores();
theFloaters.addItem('followDiv1','document.body.clientWidth-100',0,'</a><br><a href=Dirección del enlace publicitario target=_blank><img src=Dirección de la imagen publicitaria ancho=100 alto =400 borde=0></a>');
theFloaters.addItem('followDiv2',0,0,'<br><a href=Dirección del enlace publicitario target=_blank><img src=Dirección de la imagen publicitaria ancho=100 alto=400 borde=0></a>') ;
theFloaters.play();
Guarde el código anterior como un archivo JS y luego llámelo en la página donde desea lograr este efecto. ¡Preste atención a modificar la dirección de la imagen del anuncio y la dirección del enlace!
[Detección del mouse]
A diferencia del código anterior, cuando el mouse se mueve sobre la imagen publicitaria, puede detectar y mostrar el efecto de imagen grande publicitaria configurado adicionalmente. El siguiente es el código necesario para lograr el efecto:
función gran espectáculo(){
document.all.div_250.style.visibility = 'visible';
document.all.div_80.style.visibility = 'oculto';
}
función gran piel(){
document.all.div_80.style.visibility = 'visible';
document.all.div_250.style.visibility = 'oculto';
}
var ad_80= nueva matriz(1);
var ad_250= new Array(1);
ad_80[0]="<a href=http://www.dfeng.net target=_blank><img src=/skin/adv43/ad/ad_ad.gif border=0> </a>";
ad_250[0]="<a href=http://www.dfeng.net target=_blank><img src=/skin/adv43/ad/ad_ad2.gif border=0></a>"
;
var fubioizquierda;
window.screen.width>800 ? fubioleft=15:fubioleft=15
document.write('<DIV id=floater_left style="ÍNDICE Z: 25; IZQUIERDA:'+fubioleft+'px; ANCHO: 28px; POSICIÓN: absoluta; ARRIBA: 42px; ALTURA: 22px">');
ad_now = nueva Fecha();
ad_id= ad_now.getSeconds() %1
var adhead1="<div id=div_80 style='posición:absoluta; ancho:95px; alto:62px; índice z:12' onMouseOver=bigshow();>";
var adhead2="</div><div id=div_250 style='position:absolute; visibilidad: oculta; z-index:13;width: 80; height: 60' onMouseOut=bighide();>"
//var adhead1="<div id=div_80 style='position:absolute; width:95px; height:62px; z-index:20' onMouseOut='//MM_showHideLayers("div_250","","hide ")' onMouseOver='MM_showHideLayers("div_250","","show")'>";
//var adhead2="</div><div id=div_250 style='position:absolute; z-index:21;visibilidad: oculto; ancho: 80; alto: 60' onMouseOver='MM_showHideLayers("div_250" ,"","show")' onMouseOut='MM_showHideLayers("div_250","","hide")'>";
document.write(adhead1+ad_80[ad_id]+ adhead2+ad_250[ad_id]+"</div>");
documento.write ("</div>");
self.onError=null;
actualX = actualY = 0;
cualIt = nulo;
últimoDesplazamientoX = 0; últimoDesplazamientoY = 0;
NS = (documento.capas)? 1: 0;
IE = (documento.todos)? 1: 0;
función latido del corazón() {
si(es decir) {
diffY = documento.body.scrollTop;
diffX = documento.body.scrollLeft }
si(NS) {
diffY = self.pageYOffset; diffX = self.pageXOffset;
if(diffY! = últimoDesplazamientoY) {
porcentaje = 0,5 * (diffY - lastScrollY);
if(porcentaje > 0) porcentaje = Math.ceil(porcentaje);
else porcentaje = Math.floor(porcentaje);
if(IE) document.all.floater_left.style.pixelTop += porcentaje;
if(NS) document.floater_left.top += porcentaje;
lastScrollY = lastScrollY + porcentaje;
}
if(diffX! = últimoDesplazamientoX) {
porcentaje = .5 * (diffX - lastScrollX);
if(porcentaje > 0) porcentaje = Math.ceil(porcentaje);
else porcentaje = Math.floor(porcentaje);
if(IE) document.all.floater_left.style.pixelLeft += porcentaje;
if(NS) document.floater_left.left += porcentaje;
lastScrollX = lastScrollX + porcentaje;
}
}
if(NS || IE) acción = window.setInterval("heartBeat()",1);var ad_80= new Array(1);
var ad_250= new Array(1);
ad_80[0]="<a href=http://www.dfeng.net target=_blank><img src=/skin/adv43/ad/ad_ad.jpg border=0> </a>";
ad_250[0]="<a href=http://www.dfeng.net target=_blank><img src=/skin/adv43/ad/ad_ad.jpg border=0></a>"
;
var fubioizquierda;
window.screen.width>800 ? fubioleft=15:fubioleft=15
document.write('<DIV id=floater_right style="Z-INDEX: 25; IZQUIERDA:'+fubioleft+'px; ANCHO: 28px; POSICIÓN: absoluta; ARRIBA: 42px; ALTURA: 22px">');
ad_now = nueva Fecha();
ad_id= ad_now.getSeconds() %1
función micarga()
{
si (navigator.appName == "Netscape")
{
document.div_right_80.pageX=+window.innerWidth-130;
document.div_right_250.pageX=+window.innerWidth-300;
mimovimiento();
}
demás
{
div_right_80.style.left=document.body.offsetWidth-130;
div_right_250.style.left=document.body.offsetWidth-300;
mimovimiento();
}
}
función mimovimiento()
{
si(documento.ns)
{
document.div_right_80.left=pageXOffset+window.innerWidth-130;
document.div_right_250.left=pageXOffset+window.innerWidth-300;
setTimeout("mimovimiento();",20)
}
demás
{
div_right_80.style.left=document.body.scrollLeft+document.body.offsetWidth-145;
div_right_250.style.left=document.body.scrollLeft+document.body.offsetWidth-300;
setTimeout("mimovimiento();",20)
}
}
var adhead1="<div id=div_right_80 style='posición:absoluta; ancho:95px; alto:60px; z-index:12' onMouseOver=bigshow_right();>";
var adhead2="</div><div id=div_right_250 style='position:absolute; visibilidad: oculta; z-index:13;ancho: 250; alto: 250' onMouseOut=bighide_right();><div align=right >";
document.write(adhead1+ad_80[ad_id]+adhead2+ad_250[ad_id]+"</div></div>");
myload()
document.write ("</div>");
self.onError=null;
currentX_right = currentY_right = 0;
cualIt_right = nulo;
últimoDesplazamientoX_derecho = 0; últimoDesplazamientoY_derecho = 0;
NS = (documento.capas)? 1: 0;
IE = (documento.todos)? 1: 0;
función heartBeat_right() {
si(es decir) {
diffY_right = documento.body.scrollTop;
diffX_right = documento.body.scrollLeft }
si(NS) {
diffY_right = self.pageYOffset; diffX_right = self.pageXOffset;
if(diffY_right! = lastScrollY_right) {
percent_right = .5 * (diffY_right - lastScrollY_right);
if(porcentaje_derecho > 0) porcentaje_derecho = Math.ceil(porcentaje_derecho);
else percent_right = Math.floor(percent_right);
if(IE) document.all.floater_right.style.pixelTop += percent_right;
if(NS) document.floater_right.top += percent_right;
lastScrollY_right = lastScrollY_right + porcentaje_derecho;
}
if(diffX_right! = lastScrollX_right) {
percent_right = .5 * (diffX_right - lastScrollX_right);
if(porcentaje_derecho > 0) porcentaje_derecho = Math.ceil(porcentaje_derecho);
else percent_right = Math.floor(percent_right);
if(IE) document.all.floater_right.style.pixelLeft += percent_right;
if(NS) document.floater_right.left += percent_right;
lastScrollX_right = lastScrollX_right + porcentaje_derecho;
}
}
if(NS || IE) acción = window.setInterval("heartBeat_right()",1);
función bigshow_right(){
document.all.div_right_250.style.visibility = 'visible';
document.all.div_right_80.style.visibility = 'oculto';
}
función bighide_right(){
document.all.div_right_80.style.visibility = 'visible';
document.all.div_right_250.style.visibility = 'oculto';
}documento.write('');
documento.write('');
documento.write('');
Guarde el código anterior como un archivo JS y luego utilícelo en la página donde desea lograr este efecto.
<script type="text/javascript" language="javascript1.2" src="*.js"></SCRIPT>
¡Simplemente llámalo, * representa el nombre del archivo que guardaste! ¡Preste atención a modificar la dirección de la imagen del anuncio y la dirección del enlace!
A diferencia de los dos códigos anteriores, se agrega un botón de imagen debajo de la imagen publicitaria, lo que permite a los visitantes hacer clic para cerrar la imagen publicitaria. El siguiente cuadro de texto es el código necesario para lograr el efecto:
var delta=0,015;
colección de var;
var cerrarB=falso;
flotadores de función() {
this.items = [];
this.addItem = función(id,x,y,contenido)
{
document.write('<DIV id='+id+' style="Z-INDEX: 10; POSICIÓN: absoluta; ancho:80px; alto:60px;izquierda:'+(typeof(x)=='string'?eval (x):x)+';top:'+(typeof(y)=='string'?eval(y):y)+'">'+content+'</DIV>');
var nuevoItem = {};
newItem.object = document.getElementById(id);
nuevoItem.x = x;
newItem.y = y;
this.items[this.items.length] = newItem;
}
this.play = función()
{
colección = this.items
setInterval('jugar()',30);
}
}
función de juego()
{
if(ancho.pantalla<=800 || closeB)
{
for(var i=0;i<colección.longitud;i++)
{
colección[i].object.style.display = 'ninguno';
}
devolver;
}
for(var i=0;i<colección.longitud;i++)
{
var followObj = colección[i].objeto;
var followObj_x = (typeof(colección[i].x)=='cadena'?eval(colección[i].x):colección[i].x);
var followObj_y = (typeof(collection[i].y)=='string'?eval(collection[i].y):colección[i].y);
if(followObj.offsetLeft!=(document.body.scrollLeft) +seguirObj_x)) {
var dx=(document.body.scrollLeft+followObj_x-followObj.offsetLeft)*delta;
dx=(dx>0?1:-1)*Math.ceil(Math.abs(dx));
seguirObj.style.left=followObj.offsetLeft+dx;
}
if(followObj.offsetTop!=(document.body.scrollTop+followObj_y)) {
var dy=(document.body.scrollTop+followObj_y-followObj.offsetTop)*delta;
dy=(dy>0?1:-1)*Math.ceil(Math.abs(dy));
followObj.style.top=followObj.offsetTop+dy;
}
seguirObj.style.display = '';
}
}
función cerrarBanner()
{
cerrarB=verdadero;
devolver;
}
var theFloaters = nuevos flotadores();
//
theFloaters.addItem('followDiv1','document.body.clientWidth-100',0,'<a onClick="closeBanner();" href=http://www.dfeng.net target=_blank><img src= ad/doublead/right.gif ancho=100 alto=554 border=0></a><br><br><img src=ad/doublead/close.gif onClick="closeBanner();">');
theFloaters.addItem('followDiv2',0,0,'<a onClick="closeBanner();" href=http://www.dfeng.net target=_blank><img src=ad/doublead/ad_ad.gif ancho =100 altura=400 borde=0 >>a><br><br><img src=ad/doublead/close.gif onClick="closeBanner();">');
theFloaters.play();
Guarde el código anterior como un archivo JS y luego llámelo en la página donde desea lograr este efecto * representa el nombre del archivo que guardó. ¡Preste atención a modificar la dirección de la imagen del anuncio y la dirección del enlace!
Anuncios pareados flotantes: el código en el lado izquierdo.
Si desea mostrar solo un lado, el siguiente es el código necesario para lograr el efecto en el lado izquierdo:
var ad_float_left_src = "dirección de imagen";
var ad_float_left_url="dirección";
var ad_float_left_type = "";
document.ns = navigator.appName == "Microsoft Internet Explorer"
var imgheight_close
var imgizquierda
ventana.pantalla.ancho>800? imgheight_close=120:imgheight_close=120
ventana.pantalla.ancho>800 ? imgleft=8:imgleft=122
función micarga()
{
myleft.style.top=document.body.scrollTop+document.body.offsetHeigh
t-imgheight_close;
myleft.style.left=imgleft;
movimiento izquierdo();
}
función movimiento izquierdo()
{
myleft.style.top=document.body.scrollTop+document.body.offsetHeigh
t-imgheight_close;
myleft.style.left=imgleft;
setTimeout("movimiento izquierdo();",50)
}
function MM_reloadPage(init) { //recarga la ventana si Nav4
redimensionado
if (init==true) con (navegador) {if ((appName=="Netscape")&&
(parseInt(appVersion)==4)) {
documento.MM_pgW=anchointerior; documento.MM_pgH=alturainterior;
onresize=MM_reloadPage }}
de lo contrario, si (anchointerior!=document.MM_pgW ||alturainterior!
=documento.MM_pgH) ubicación.recargar();
}
MM_reloadPage(verdadero)
función close_float_left(){
myleft.style.visibility='oculto';
}
document.write("<div id=myleft style='posición:
absoluto;ancho:80;arriba:300;izquierda:5;visibilidad: visible;índice z: 1'>"
+"<estilo>"
+"A.closefloat:enlace,A.refloat:visitado {texto-
decoración:ninguna;color:#000000;tamaño de fuente:12px}"
+"A.closefloat:activo,A.refloat:hover {text-decoration:underline;color:#0000FF;font-size:12px}"
+"</estilo>"
+"<table border=0 cellpadding=0 cellpacing=0><tr><td>")
;
si(ad_float_left_type!="swf")
document.write("<a href='" + ad_float_left_url + "' destino
= '_blank'><img src='" + ad_float_left_src + "' ANCHO=88
altura=31 borde=0></a>");
demás
document.write("<EMBED src='" + ad_float_left_src + "'
calidad = alta ANCHO = 80 ALTURA = 80 TIPO = 'aplicación/x-shockwave-
flash' id=changhongout >>EMBED>");
document.write("</td></tr><tr><td ancho=80 alto=20
align=right><a href='javascript:close_float_left();void(0);'
class=closefloat><b><font color=#ff0000>Cerrar</font></b></a></td></tr>"
+"</tabla>"
+"</div>");
micarga()}
Guarde el código anterior como un archivo *.JS y luego utilícelo en la página donde desea lograr este efecto.
<script src="*.js"></SCRIPT>
¡Simplemente llámalo, * representa el nombre del archivo que guardaste! ¡Preste atención a modificar la dirección de la imagen del anuncio y la dirección del enlace! Los parámetros correspondientes se pueden ajustar según la página.