js-zentrierte Floating-Werbung

Programmquellcode

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 }); 
} 
}

Programmprinzip
Der gesamte Werbevorgang erfolgt während der Initialisierung
2 Von unten nach oben. Bis die gesamte Anzeige angezeigt wird
3. Die Anzeige beim Scrollen immer am unteren Rand der Seite belassen
4
Das Wichtigste an der gesamten Implementierung ist die Kontrolle des Abstands zwischen der Anzeige und dem oberen Rand des Dokuments (scrollTop + browser.clientHeight). 🎜>Holen Sie sich scrollTop, scrollLeft
Beachten Sie, dass Chrome und Safari auch im Standard-Dokumentmodus „root document.body“ anstelle von „document.documentElement“ sind

Breite und Höhe des Visuals abrufen Fenster

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; 
};

Code-Ideenfluss

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 
} 
};

Initialisierung (init) - ----> Mitte festlegen und unten ausblenden (setCenter) -----> --> Rufen Sie die Rückruffunktion _callback auf -----> Starten Sie den Countdown bis zur Fade-Zeit (setTimeout(fadeOut, time)) und binden Sie die Echtzeiterkennungsfunktion (Scroll) - ----> Anzeigen zum benutzerdefinierten Zeitpunkt ausblenden (FadeOut)

Anweisungen zur Verwendung
Beispielfunktion: Legen Sie die Standardattribute fest

Dies dient der Vereinfachung der Demonstration. Die Anzeige wird also initialisiert, wenn auf die Schaltfläche geklickt wird. Sie kann auch in window.onload verwendet werden.

Weitere Artikel zum Thema js-zentrierte Floating-Werbung finden Sie auf der chinesischen PHP-Website!