De nos jours, de nombreuses publicités sur sites Web battent leur plein. Je vais maintenant présenter l'utilisation du code de l'effet publicitaire flottant de couplet commun. L'effet introduit peut être affiché normalement à la résolution de 1024*768 et peut être affiché à la résolution de 800*600. . Masquer automatiquement pour éviter de bloquer la page et d'affecter le contenu de navigation des visiteurs. Voici le code requis pour obtenir cet effet :
vardelta=0,015
collection var ;
fonction flotteurs() {
this.items = [];
this.addItem = fonction (id, x, y, contenu)
{
document.write('<DIV id='+id+' style="Z-INDEX: 0; POSITION: absolue; largeur:80px; hauteur:60px;gauche:'+(typeof(x)=='string'?eval (x):x)+';top:'+(typeof(y)=='string'?eval(y):y)+'">'+content+'</DIV>');
var nouvelObjet = {};
newItem.object = document.getElementById(id);
nouvelArticle.x = x;
newItem.y = y;
this.items[this.items.length] = newItem;
}
this.play = fonction()
{
collection = ceci.articles
setInterval('play()',10);
}
}
fonction jouer()
{
si (écran.width <= 800)
{
pour(var i=0;i<collection.length;i++)
{
collection[i].object.style.display = 'aucun';
}
retour;
}
pour(var i=0;i<collection.length;i++)
{
var followObj = collection[i].object;
var followObj_x = (typeof(collection[i].x)=='string'?eval(collection[i].x):collection[i].x);
var followObj_y = (typeof(collection[i].y)=='string'?eval(collection[i].y):collection[i].y);
if(followObj.offsetLeft!=(document.body.scrollLeft); +suivreObj_x)) {
var dx=(document.body.scrollLeft+followObj_x-followObj.offsetLeft)*delta;
dx=(dx>0?1:-1)*Math.ceil(Math.abs(dx));
followObj.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;
}
followObj.style.display = '';
}
}
var theFloaters = nouveaux flotteurs();
theFloaters.addItem('followDiv1','document.body.clientWidth-100',0,'</a><br><a href=Adresse du lien publicitaire target=_blank><img src=Largeur de l'adresse de l'image publicitaire=100 hauteur =400 frontière=0></a>');
theFloaters.addItem('followDiv2',0,0,'<br><a href=Adresse du lien publicitaire target=_blank><img src=Adresse de l'image publicitaire largeur=100 hauteur=400 bordure=0></a>') ;
lesFloaters.play();
Enregistrez le code ci-dessus sous forme de fichier JS, puis appelez-le sur la page où vous souhaitez obtenir cet effet ! Faites attention à modifier l'adresse de l'image de l'annonce et l'adresse du lien !
[Détection de la souris]
Contrairement au code précédent, lorsque la souris se déplace sur l'image publicitaire, elle peut détecter et afficher l'effet de grande image publicitaire défini en plus. Voici le code requis pour obtenir l'effet :
fonction bigshow(){
document.all.div_250.style.visibility = 'visible';
document.all.div_80.style.visibility = 'caché';
}
fonction bighide(){
document.all.div_80.style.visibility = 'visible';
document.all.div_250.style.visibility = 'caché';
}
var ad_80= nouveau tableau(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 fubiogauche;
window.screen.width>800 ? fubioleft=15:fubioleft=15
document.write('<DIV id=floater_left style="Z-INDEX: 25; GAUCHE:'+fubioleft+'px; LARGEUR: 28px;POSITION: absolue; HAUT : 42px ; HAUTEUR : 22px">');
ad_now = new Date();
ad_id= ad_now.getSeconds() %1
var adhead1="<div id=div_80 style='position:absolute; width:95px; height:62px; z-index:12' onMouseOver=bigshow();>";
var adhead2="</div><div id=div_250 style='position:absolute; visibilité : cachée; z-index:13;largeur : 80; hauteur : 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;visibilité : cachée; largeur : 80 ; hauteur : 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>");
document.write ("</div>");
self.onError=null;
courantX = courantY = 0 ;
whichIt = nul ;
dernierDéfilementX = 0 ; dernierDéfilementY = 0 ;
NS = (document.couches) ? 1 : 0;
IE = (document.all) ? 1 : 0 ;
fonction heartBeat() {
si (IE) {
diffY = document.body.scrollTop;
diffX = document.body.scrollLeft }
si(N.-É.) {
diffY = self.pageYOffset; diffX = self.pageXOffset }
si(diffY != lastScrollY) {
pourcentage = 0,5 * (diffY - lastScrollY) ;
if(pourcentage > 0) pourcent = Math.ceil(pourcentage);
sinon pour cent = Math.floor (pour cent);
if(IE) document.all.floater_left.style.pixelTop += pourcentage ;
if(NS) document.floater_left.top += pour cent ;
lastScrollY = lastScrollY + pourcentage ;
}
si(diffX != lastScrollX) {
pourcentage = 0,5 * (diffX - lastScrollX) ;
if(pourcentage > 0) pourcent = Math.ceil(pourcentage);
sinon pour cent = Math.floor (pour cent);
if(IE) document.all.floater_left.style.pixelLeft += pourcentage ;
if(NS) document.floater_left.left += pour cent ;
lastScrollX = lastScrollX + pourcentage ;
}
}
if(NS || IE) action = 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 fubiogauche;
window.screen.width>800 ? fubioleft=15:fubioleft=15
document.write('<DIV id=floater_right style="Z-INDEX: 25; GAUCHE:'+fubioleft+'px; LARGEUR: 28px;POSITION: absolue; HAUT : 42px ; HAUTEUR : 22px">');
ad_now = new Date();
ad_id= ad_now.getSeconds() %1
fonction macharge()
{
si (navigator.appName == "Netscape")
{
document.div_right_80.pageX=+window.innerWidth-130;
document.div_right_250.pageX=+window.innerWidth-300;
mondéplacement();
}
autre
{
div_right_80.style.left=document.body.offsetWidth-130 ;
div_right_250.style.left=document.body.offsetWidth-300 ;
mondéplacement();
}
}
fonction monmove()
{
si(document.ns)
{
document.div_right_80.left=pageXOffset+window.innerWidth-130 ;
document.div_right_250.left=pageXOffset+window.innerWidth-300 ;
setTimeout("monmove();",20)
}
autre
{
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("monmove();",20)
}
}
var adhead1="<div id=div_right_80 style='position:absolute; width:95px; height:60px; z-index:12' onMouseOver=bigshow_right();>";
var adhead2="</div><div id=div_right_250 style='position:absolute; visibilité : cachée; z-index:13;largeur : 250; hauteur : 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;
courantX_right = courantY_right = 0 ;
whichIt_right = null ;
dernierScrollX_right = 0 ; dernierScrollY_right = 0 ;
NS = (document.couches) ? 1 : 0;
IE = (document.all) ? 1 : 0 ;
fonction heartBeat_right() {
si (IE) {
diffY_right = document.body.scrollTop;
diffX_right = document.body.scrollLeft }
si(N.-É.) {
diffY_right = self.pageYOffset; diffX_right = self.pageXOffset }
si(diffY_right != lastScrollY_right) {
percent_right = 0,5 * (diffY_right - lastScrollY_right) ;
if(percent_right > 0) percent_right = Math.ceil(percent_right);
sinon 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 + percent_right ;
}
si(diffX_right != lastScrollX_right) {
percent_right = 0,5 * (diffX_right - lastScrollX_right) ;
if(percent_right > 0) percent_right = Math.ceil(percent_right);
sinon 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 + percent_right ;
}
}
if(NS || IE) action = window.setInterval("heartBeat_right()",1);
fonction bigshow_right(){
document.all.div_right_250.style.visibility = 'visible';
document.all.div_right_80.style.visibility = 'caché';
}
fonction bighide_right(){
document.all.div_right_80.style.visibility = 'visible';
document.all.div_right_250.style.visibility = 'caché';
}document.write('');
document.write('');
document.write('');
Enregistrez le code ci-dessus en tant que fichier JS, puis utilisez-le sur la page sur laquelle vous souhaitez obtenir cet effet.
<script type="text/javascript" langage="javascript1.2" src="*.js"></SCRIPT>
Appelez-le simplement, * représente le nom du fichier que vous avez enregistré ! Faites attention à modifier l'adresse de l'image de l'annonce et l'adresse du lien !
Contrairement aux deux codes précédents, un bouton d'image est ajouté sous l'image publicitaire, permettant aux visiteurs de cliquer pour fermer l'image publicitaire. La zone de texte suivante est le code requis pour obtenir l'effet :
vardelta=0,015 ;
collection var ;
var closeB=faux;
fonction flotteurs() {
this.items = [];
this.addItem = fonction (id, x, y, contenu)
{
document.write('<DIV id='+id+' style="Z-INDEX: 10; POSITION: absolue; largeur:80px; hauteur:60px;gauche:'+(typeof(x)=='string'?eval (x):x)+';top:'+(typeof(y)=='string'?eval(y):y)+'">'+content+'</DIV>');
var nouvelObjet = {};
newItem.object = document.getElementById(id);
nouvelArticle.x = x;
newItem.y = y;
this.items[this.items.length] = newItem;
}
this.play = fonction()
{
collection = ceci.articles
setInterval('play()',30);
}
}
fonction jouer()
{
if(screen.width<=800 || closeB)
{
pour(var i=0;i<collection.length;i++)
{
collection[i].object.style.display = 'aucun';
}
retour;
}
pour(var i=0;i<collection.length;i++)
{
var followObj = collection[i].object;
var followObj_x = (typeof(collection[i].x)=='string'?eval(collection[i].x):collection[i].x);
var followObj_y = (typeof(collection[i].y)=='string'?eval(collection[i].y):collection[i].y);
if(followObj.offsetLeft!=(document.body.scrollLeft); +suivreObj_x)) {
var dx=(document.body.scrollLeft+followObj_x-followObj.offsetLeft)*delta;
dx=(dx>0?1:-1)*Math.ceil(Math.abs(dx));
followObj.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;
}
followObj.style.display = '';
}
}
fonction closeBanner()
{
closeB=true ;
retour;
}
var theFloaters = new floaters();
//
theFloaters.addItem('followDiv1','document.body.clientWidth-100',0,'<a onClick="closeBanner();" href=http://www.dfeng.net target=_blank><img src= ad/doublead/right.gif width=100 height=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 width =100 hauteur=400 bordure=0 ></a><br><br><img src=ad/doublead/close.gif onClick="closeBanner();">');
lesFloaters.play();
Enregistrez le code ci-dessus en tant que fichier JS, puis appelez-le sur la page où vous souhaitez obtenir cet effet * représente le nom du fichier que vous avez enregistré ! Faites attention à modifier l'adresse de l'image de l'annonce et l'adresse du lien !
Annonces à distiques flottantes --- le code sur le côté gauche
Si vous souhaitez afficher un seul côté, voici le code requis pour obtenir l'effet sur le côté gauche :
var ad_float_left_src = "adresse de l'image" ;
var ad_float_left_url="adresse";
var ad_float_left_type = "";
document.ns = navigator.appName == "Microsoft Internet Explorer"
var imgheight_close
var imggauche
window.screen.width>800 ? imgheight_close=120:imgheight_close=120
window.screen.width>800 ? imgleft=8:imgleft=122
fonction macharge()
{
myleft.style.top=document.body.scrollTop+document.body.offsetHeigh
t-imgheight_close;
myleft.style.left=imgleft;
déplacement à gauche();
}
fonction déplacement gauche()
{
myleft.style.top=document.body.scrollTop+document.body.offsetHeigh
t-imgheight_close;
myleft.style.left=imgleft;
setTimeout("leftmove();",50)
}
function MM_reloadPage(init) { //recharge la fenêtre si Nav4
redimensionné
if (init==true) avec (navigateur) {if ((appName=="Netscape")&&
(parseInt(appVersion)==4)) {
document.MM_pgW=largeurintérieure; document.MM_pgH=Hauteurintérieure;
onresize=MM_reloadPage;}}
sinon si (innerWidth!=document.MM_pgW || innerHeight!
=document.MM_pgH) location.reload();
}
MM_reloadPage(true)
fonction close_float_left(){
myleft.style.visibility='caché';
}
document.write("<div id=myleft style='position :
absolu;largeur:80;haut:300;gauche:5;visibilité: visible;z-index: 1'>"
+"<style>"
+"A.closefloat:lien,A.refloat:visité {texte-
décoration: aucune; couleur: #000000; taille de police: 12px}"
+"A.closefloat:active,A.refloat:hover {text-decoration:underline;color:#0000FF;font-size:12px}"
+"</style>"
+"<table border=0 cellpadding=0 cellpacing=0><tr><td>");
if(document.ns){
si(ad_float_left_type!="swf")
document.write("<a href='" + ad_float_left_url + "' cible
= '_blank'><img src='" + ad_float_left_src + "' LARGEUR=88
hauteur=31 bordure=0></a>");
autre
document.write("<EMBED src='" + ad_float_left_src + "'
qualité=haute LARGEUR=80 HAUTEUR=80 TYPE='application/x-shockwave-
flash' id=changhongout ></EMBED>");
document.write("</td></tr><tr><td width=80 height=20
align=right><a href='javascript:close_float_left();void(0);'
class=closefloat><b><font color=#ff0000>Fermer</font></b></a></td></tr>"
+"</table>"
+"</div>");
moncharge()}
Enregistrez le code ci-dessus sous forme de fichier *.JS, puis utilisez-le sur la page sur laquelle vous souhaitez obtenir cet effet.
<script src="*.js"></SCRIPT>
Appelez-le simplement, * représente le nom du fichier que vous avez enregistré ! Faites attention à modifier l'adresse de l'image de l'annonce et l'adresse du lien ! Les paramètres correspondants peuvent être ajustés en fonction de la page.