js 중심 부동 광고 광고 코드

程序源码

复代码 代码如下:

var floatAd = {};
floatAd.getScrollTop = function(node) {
var doc = node ? node.ownerDocument : 문서;
return doc.documentElement.scrollTop || doc.body.scrollTop;
};
floatAd.getScrollLeft = function(node) {
var doc = node ? node.ownerDocument : 문서;
return doc.documentElement.scrollLeft || doc.body.scrollLeft;
};
floatAd.getBrowser = function() {
var d = document.documentElement;
return {
너비: window.innerWidth || (d && d.clientWidth) || document.body.clientWidth,
높이: window.innerHeight || (d && d.clientHeight) || document.body.clientHeight
}
};
floatAd.extend = function(destination, source) {
for(var property in source) {
destination[property] = source[property];
}
귀국 목적지;
};
/* 默认属性扩展 */
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 = parsInt(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); | 10) ((this.end < this.start) ? -this.amount : this.amount) 'px';
}
};
/* 目标居中并处于最底부 */
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 'px';
this.control.style.left = this.left 'px';
};
/* fadeIn */
floatAd.fadeIn = function(callback) {
var _this = this, _top = 0;
this.control.style.display = '차단'; // *要提前显示.不然无法取得clientWidth
this.setCenter();
var _timer = window.setInterval(function() {
_this.control.style.top = _this.getScrollTop() _this.getBrowser().height - ( _top) 'px';
if( _top >= _this.control.clientHeight) {
window.clearInterval(_timer)
콜백 && 콜백()
}
}, 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 = 'none' ;
} else {
_this.control.style.top = _this.getScrollTop() _this.getBrowser().height - (--_top) 'px'
}
}, 2 );
this.control.style.top = (parseInt(this.control.style.top, 10) 100) 'px';
};
var newAd = '시작';
document.getElementById('show').onclick = function() {
if(newAd == 'start') {
newAd = floatAd.init('ad', { fadeTime: 10 }) ;
}
}

程序원리
整个广告运行具有四步动작.
1. 初始化时隐藏于页면最底부.
2. 自底向上升起.直到整个广告漂浮出来
3. 启动检测.滚动时保持广告始终处于页면中间最底부.
4. 到达自定义间隔时间.广告自动渐隐. <非窗口 非窗口> (非窗口) 最顶部的距离 最顶部的距离. (ScrollTop Browser.ClientHeight). <…复제대码


代码如下:

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

표시 창의 너비와 높이를 가져옵니다

코드 복사 코드는 다음과 같습니다. floatAd.getBrowser = function() {

var d = document.documentElement;

return {
width: window.innerWidth || | document.body.clientWidth ,
height: window.innerHeight || (d && d.clientHeight) || document.body.clientHeight
}
}; 아이디어 흐름
초기화(init) -----> 중앙 설정 및 하단 숨기기(setCenter) -----> FadeIn(fadeIn) -----> 콜백 호출이 완료됩니다. function _callback ---- ->
페이드 타임(setTimeout(fadeOut, time))까지 카운트다운을 시작하고, 실시간 감지 기능(스크롤)을 결합합니다. -----> 시간 도달(fadeOut)
사용 지침
광고 컨테이너 ID를 전달합니다.

기본 속성은 다음과 같습니다.



코드 복사


코드는 다음과 같습니다.

지연: 20, // 조정 비율 fadeTime: 1 // 자동 소멸 시간( s) var newAd = 'start'; document.getElementById ('show').onclick = function() { if(newAd == 'start') {

newAd = floatAd. init('ad', { fadeTime: 10 });

}
}


시연의 편의를 위한 것이므로 버튼을 클릭하면 광고가 초기화됩니다. window.onload 중에도 로드할 수 있습니다.
데모 다운로드 주소
가 중앙 플로팅 광고 코드
에 표시됩니다.