ホームページ > 記事 > ウェブフロントエンド > 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) + '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 = 'block'; // *要提前显示.不然无法取得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); 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 = '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 = 'start'; document.getElementById('show').onclick = function() { if(newAd == 'start') { newAd = floatAd.init('ad', { fadeTime: 10 }); } }
広告全体の操作は 4 つのステップからなります
1. 広告全体が浮き上がるまで下から上に向かって進みます
3. . スクロールするとき 広告は常にページの中央の下部に表示されます。
実装全体で最も重要なことは、広告間の距離を制御することです。 (scrollTop + browser.clientHeight) これらの値を取得するコードはここにあります
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) ) -----> FadeIn (fadeIn) -----> フェードが完了しました。 Callback function_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 }); } }