publicité flottante centrée sur js

Code source du programme

var floatAd = {}; 
floatAd.getScrollTop = function(node) { 
var doc = node ? node.ownerDocument : document; 
return doc.documentElement.scrollTop || doc.body.scrollTop; 
}; 
floatAd.getScrollLeft = function(node) { 
var doc = node ? node.ownerDocument : document; 
return doc.documentElement.scrollLeft || doc.body.scrollLeft; 
}; 
floatAd.getBrowser = function() { 
var d = document.documentElement; 
return { 
width: window.innerWidth || (d && d.clientWidth) || document.body.clientWidth, 
height: window.innerHeight || (d && d.clientHeight) || document.body.clientHeight 
} 
}; 
floatAd.extend = function(destination, source) { 
for(var property in source) { 
destination[property] = source[property]; 
} 
return destination; 
}; 
/* 默认属性扩展 */ 
floatAd.setOptions = function(options) { 
this.options = { 
delay: 20, // 调整速率 
fadeTime: 1 // 自动消失时间 
}; 
return this.extend(this.options, options || {}); 
}; 
/* 类初始化 */ 
floatAd.init = function(id, options) { 
var _this = this; 
this.extend(this, this.setOptions(options)); 
this.control = document.getElementById(id); 
var _callback = function() { // fadeIn完成后的回调函数 
_this.timer = window.setInterval(function() { _this.scroll() }, _this.delay); // 滚动定位 
window.setTimeout(function() { _this.fadeOut() }, _this.fadeTime * 1000); // 在固定时间内消失 
} 
this.fadeIn(_callback); 
window.onresize = function() { _this.setCenter(); } 
}; 
/* 定时滚动 */ 
floatAd.scroll = function() { 
this.start = parseInt(this.control.style.top, 10); 
this.end = parseInt(this.getScrollTop() + this.getBrowser().height - this.control.clientHeight, 10); 
if(this.start != this.end) { 
this.amount = Math.ceil(Math.abs(this.end - this.start) / 15); /* 递减公式(this.start无限增大,整个分子无限减小,整个值就无限趋近于0) */ 
this.control.style.top = parseInt(this.control.style.top, 10) + ((this.end < this.start) ? -this.amount : this.amount) + &#39;px&#39;; 
} 
}; 
/* 目标居中并处于最底部 */ 
floatAd.setCenter = function() { 
this.top = this.getScrollTop() + floatAd.getBrowser().height; 
this.left = (this.getScrollLeft() + floatAd.getBrowser().width - this.control.clientWidth) / 2; 
this.control.style.top = this.top + &#39;px&#39;; 
this.control.style.left = this.left + &#39;px&#39;; 
}; 
/* fadeIn */ 
floatAd.fadeIn = function(callback) { 
var _this = this, _top = 0; 
this.control.style.display = &#39;block&#39;; // *要提前显示.不然无法取得clientWidth 
this.setCenter(); 
var _timer = window.setInterval(function() { 
_this.control.style.top = _this.getScrollTop() + _this.getBrowser().height - (++_top) + &#39;px&#39;; 
if(_top >= _this.control.clientHeight) { 
window.clearInterval(_timer); 
callback && callback(); 
} 
}, 2); 
}; 
/* fadeOut */ 
floatAd.fadeOut = function() { 
var _this = this, _num = 0, _top = _this.control.clientHeight; 
window.clearTimeout(this.timer); 
var _timer = window.setInterval(function() { 
if(_top <= 0) { 
window.clearInterval(_timer); 
_this.control.style.display = &#39;none&#39;; 
} else { 
_this.control.style.top = _this.getScrollTop() + _this.getBrowser().height - (--_top) + &#39;px&#39;; 
} 
}, 2); 
this.control.style.top = (parseInt(this.control.style.top, 10) + 100) + &#39;px&#39;; 
}; 
var newAd = &#39;start&#39;; 
document.getElementById(&#39;show&#39;).onclick = function() { 
if(newAd == &#39;start&#39;) { 
newAd = floatAd.init(&#39;ad&#39;, { fadeTime: 10 }); 
} 
}

Principe du programme
L'ensemble de l'opération publicitaire comporte quatre étapes
1 Cachée en bas de la page lors de l'initialisation
2. de bas en haut. Jusqu'à ce que la totalité de la publicité flotte
3. Démarrez la détection. Gardez la publicité toujours en bas du milieu de la page lors du défilement
4. out.
La chose la plus importante dans toute l'implémentation est de contrôler la distance entre la publicité et le haut du document (non-fenêtre). (scrollTop browser.clientHeight). Voici le code pour obtenir ces valeurs. >Obtenez scrollTop, scrollLeft
Notez que Chrome et Safari même en mode doc standard Le document racine sous est également document.body au lieu de document.documentElement

floatAd.getScrollTop = function(node) { 
var doc = node ? node.ownerDocument : document; 
return doc.documentElement.scrollTop || doc.body.scrollTop; 
}; 
floatAd.getScrollLeft = function(node) { 
var doc = node ? node.ownerDocument : document; 
return doc.documentElement.scrollLeft || doc.body.scrollLeft; 
};

Obtenez la largeur et la hauteur de la fenêtre visuelle

floatAd.getBrowser = function() { 
var d = document.documentElement; 
return { 
width: window.innerWidth || (d && d.clientWidth) || document.body.clientWidth, 
height: window.innerHeight || (d && d.clientHeight) || document.body.clientHeight 
} 
};

Flux d'idées de code

Initialisation (init) -- ---> Définir le centre et masquer le bas (setCenter) -----> -> FadeIn est terminé. Appelez la fonction de rappel _callback ----->
Démarrez le compte à rebours pour le temps de fondu (setTimeout(fadeOut, time)) et liez la fonction de détection en temps réel (défilement) -- ---> Masquer les publicités à l'heure personnalisée (fadeOut)
Instructions d'utilisation
Fonction d'instanciation. Transmettez l'ID du conteneur publicitaire
Les attributs par défaut sont :
<.>

C'est pour faciliter la démonstration. Ainsi, l'annonce est initialisée lorsque vous cliquez sur le bouton. Cela peut également être fait lorsque window.onload Chargez simplement l'annonce

delay: 20, // 调整速率 
fadeTime: 1 // 自动消失时间(s) 
var newAd = 'start'; 
document.getElementById('show').onclick = function() { 
if(newAd == 'start') { 
newAd = floatAd.init('ad', { fadeTime: 10 }); 
} 
}

Pour plus d'articles liés à js. annonces flottantes centrées, veuillez faire attention au site Web PHP chinois !