js 중심 플로팅 광고

프로그램 소스 코드

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

프로그램 원리
전체 광고 작업은 4단계로 구성됩니다.
1. 초기화 시 페이지 하단에 숨겨집니다.
2. 상단. 전체 광고가 떠오를 때까지
3. 감지를 시작합니다. 스크롤할 때 광고가 항상 중앙 하단에 유지됩니다.
4. 광고가 자동으로 사라집니다.
전체 구현에서 가장 중요한 것은 문서 상단(비창문)으로부터의 거리를 제어하는 ​​것입니다(scrollTop + browser.clientHeight).
Get scrollTop, scrollLeft
표준 문서 모드에서도 Chrome 및 Safari에 유의하세요. 루트 문서도 document.documentElement 대신 document.body입니다

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

코드 아이디어 흐름
초기화(init) -----> 중앙을 설정하고 하단을 숨깁니다(setCenter) -----> in이 완료되었습니다. _callback ----->
페이드 아웃 시간(setTimeout(fadeOut, time))까지 카운트다운을 시작하고 실시간 감지 기능(스크롤)을 바인딩합니다. --> 맞춤 시간에 광고 숨기기(fadeOut)
인스턴스화 기능. 기본 속성을 설정하세요.

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

이는 시연의 편의를 위한 것이므로 버튼을 클릭하면 광고가 초기화됩니다.

JS 중심 플로팅 광고에 대한 자세한 내용은 주의하시기 바랍니다. PHP 중국어 웹사이트!