等页面文档和所有文件加载完;
再调用js加载广告图片;
最后广告图片加载完成才,才切入广告图片;
使用动画函数。
/*******
*
* 功能描述:等网页内容全部加载完后,再后台加载广告图片,加载广告图片后在展开广告。
*
* 使用时步骤:
* (1)把<script type="text/javascript" src="ad.js"></script>引用于head标签内;
* (2)在ad.js文件中尾巴找到如下代码进行相应的代码;
* (3)如果有 && window.parent.frames["parent"].document.readyState == "complete",删除。
*
* new AnimeAd({
* 780, //广告的宽度
* height: 300, //广告的高度
* speed: 2000, //多少秒内完成展开广告
* closeTime: 8000, //自动关闭广告的时间
* imgUrl: 'banner.png', //图片路径
* url: 'http://www.zwbk.org' //点击广告后跳转的链接
* });
* author:dreamback@foxmail.com
*/
*
* 功能描述:等网页内容全部加载完后,再后台加载广告图片,加载广告图片后在展开广告。
*
* 使用时步骤:
* (1)把<script type="text/javascript" src="ad.js"></script>引用于head标签内;
* (2)在ad.js文件中尾巴找到如下代码进行相应的代码;
* (3)如果有 && window.parent.frames["parent"].document.readyState == "complete",删除。
*
* new AnimeAd({
* 780, //广告的宽度
* height: 300, //广告的高度
* speed: 2000, //多少秒内完成展开广告
* closeTime: 8000, //自动关闭广告的时间
* imgUrl: 'banner.png', //图片路径
* url: 'http://www.zwbk.org' //点击广告后跳转的链接
* });
* author:dreamback@foxmail.com
*/
等待页面加载:
if (document.readyState == "complete") //当页面加载状态为完全结束时进入
等待广告图片加载完:
loadImage:function(url, callback) {
var img = new Image(); //创建一个Image对象,实现图片的预下载
img.src = url;
if (img.complete) { // 如果图片已经存在于浏览器缓存,直接调用回调函数
callback.call(img);
return; // 直接返回,不用再处理onload事件
}
img.onload = function () { //图片下载完毕时异步调用callback函数。
callback.call(img);//将回调函数的this替换为Image对象
};
}
var img = new Image(); //创建一个Image对象,实现图片的预下载
img.src = url;
if (img.complete) { // 如果图片已经存在于浏览器缓存,直接调用回调函数
callback.call(img);
return; // 直接返回,不用再处理onload事件
}
img.onload = function () { //图片下载完毕时异步调用callback函数。
callback.call(img);//将回调函数的this替换为Image对象
};
}
完整代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/*******
*
* 功能描述:等网页内容全部加载完后,再后台加载广告图片,加载广告图片后在展开广告。
*
* 使用时步骤:
* (1)把<script type="text/javascript" src="ad.js"></script>引用于head标签内;
* (2)在ad.js文件中尾巴找到如下代码进行相应的代码;
* (3)如果有 && window.parent.frames["parent"].document.readyState == "complete",删除。
*
* new AnimeAd({
* 780, //广告的宽度
* height: 300, //广告的高度
* speed: 2000, //多少秒内完成展开广告
* closeTime: 8000, //自动关闭广告的时间
* imgUrl: 'banner.png', //图片路径
* url: 'http://www.zwbk.org' //点击广告后跳转的链接
* });
* author:dreamback@foxmail.com
*/
(function () {
function AnimeAd(options) {
this.width = options.width;
this.height = options.height;
this.imgUrl = options.imgUrl;
this.url = options.url;
this.speed = options.speed || 1500;
this.background = options.background || '#fff';
this.close = true;
this.closeTime = options.closeTime || 5000;
this.init();
this.settimeout = null;
this.interval = null;
};
AnimeAd.prototype = {
init: function () {
var _this = this;
document.onreadystatechange = pageFinished; //当页面加载状态改变的时候执行这个方法.
function pageFinished() {
if (document.readyState == "complete") //当页面加载状态为完全结束时进入
{
_this.loadImage(_this.imgUrl,function(){
var div = document.createElement('div');
var ad = document.body.insertBefore(div, document.body.childNodes[0]);
//设置样式
ad.style.margin = '0 auto';
ad.style.height = 0;
ad.style.overflow = 'hidden';
ad.style.position = 'relative';
ad.style.background = _this.background;
ad.innerHTML = '<a href="' + _this.url + '" target="_blank" style="display:block;margin:0 auto;height:'+_this.height+'px;'+_this.width+'px"><img src="' + _this.imgUrl + '" /></a>';
ad.innerHTML += '<div id="closeAd" style="position:absolute;100px;height:32px;right:0;bottom:0;background:red;color:#fff;line-height:32px;text-align:center;cursor:pointer;">CLOSE</div>';
if (_this.close) {
_this.interval = _this.animate(ad, {
height: parseInt(ad.style.height)
}, {
height: _this.height
}, _this.speed, _this.easeInOut);
_this.close = false;
document.getElementById('closeAd').innerHTML = '关闭';
_this.closeAd(ad);
}
_this.settimeout = setTimeout(function () {
_this.animate(ad, {
height: parseInt(ad.style.height)
}, {
height: -parseInt(ad.style.height) + 32
}, _this.speed, _this.easeInOut);
_this.close = true;
document.getElementById('closeAd').innerHTML = '展开';
}, _this.closeTime);
});
}
}
},
closeAd: function (ad) {//按钮函数
var _this = this;
var toggleBtn = document.getElementById('closeAd');
toggleBtn.onmousedown = function () {
_this.settimeout && clearTimeout(_this.settimeout);
_this.interval && _this.interval();
if (_this.close) {
_this.settimeout = _this.animate(ad, {
height: parseInt(ad.style.height)
}, {
height: _this.height - 32
}, _this.speed, _this.easeInOut);
toggleBtn.innerHTML = '关闭';
_this.close = false;
} else {
_this.settimeout = _this.animate(ad, {
height: parseInt(ad.style.height)
}, {
height: -parseInt(ad.style.height) + 32
}, _this.speed, _this.easeInOut);
toggleBtn.innerHTML = '展开';
_this.close = true;
}
}
},
animate: function (o, start, alter, dur, fx) {//动画函数
var curTime = 0;
var t = setInterval(function () {
if (curTime >= dur) clearInterval(t);
for (var i in start) {
o.style[i] = fx(start[i], alter[i], curTime, dur) + "px";
}
curTime += 40;
}, 40);
return function () {
clearInterval(t);
};
},
easeInOut: function (start, alter, curTime, dur) {//运动算子
var progress = curTime / dur * 2;
return (progress < 1 ? Math.pow(progress, 2) : -((--progress) * (progress - 2) - 1)) * alter / 2 + start;
},
loadImage:function(url, callback) {
var img = new Image(); //创建一个Image对象,实现图片的预下载
img.src = url;
if (img.complete) { // 如果图片已经存在于浏览器缓存,直接调用回调函数
callback.call(img);
return; // 直接返回,不用再处理onload事件
}
img.onload = function () { //图片下载完毕时异步调用callback函数。
callback.call(img);//将回调函数的this替换为Image对象
};
}
};
new AnimeAd({
780, //广告的宽度
height: 300, //广告的高度
speed: 1000, //多少秒内完成展开广告
closeTime: 4000, //自动关闭广告的时间
background:'#f90',
imgUrl: 'http://images.cnblogs.com/cnblogs_com/dreamback/302151/r_banner.png', //图片路径
url: 'http://www.zwbk.org' //点击广告后跳转的链接
});
})();
*
* 功能描述:等网页内容全部加载完后,再后台加载广告图片,加载广告图片后在展开广告。
*
* 使用时步骤:
* (1)把<script type="text/javascript" src="ad.js"></script>引用于head标签内;
* (2)在ad.js文件中尾巴找到如下代码进行相应的代码;
* (3)如果有 && window.parent.frames["parent"].document.readyState == "complete",删除。
*
* new AnimeAd({
* 780, //广告的宽度
* height: 300, //广告的高度
* speed: 2000, //多少秒内完成展开广告
* closeTime: 8000, //自动关闭广告的时间
* imgUrl: 'banner.png', //图片路径
* url: 'http://www.zwbk.org' //点击广告后跳转的链接
* });
* author:dreamback@foxmail.com
*/
(function () {
function AnimeAd(options) {
this.width = options.width;
this.height = options.height;
this.imgUrl = options.imgUrl;
this.url = options.url;
this.speed = options.speed || 1500;
this.background = options.background || '#fff';
this.close = true;
this.closeTime = options.closeTime || 5000;
this.init();
this.settimeout = null;
this.interval = null;
};
AnimeAd.prototype = {
init: function () {
var _this = this;
document.onreadystatechange = pageFinished; //当页面加载状态改变的时候执行这个方法.
function pageFinished() {
if (document.readyState == "complete") //当页面加载状态为完全结束时进入
{
_this.loadImage(_this.imgUrl,function(){
var div = document.createElement('div');
var ad = document.body.insertBefore(div, document.body.childNodes[0]);
//设置样式
ad.style.margin = '0 auto';
ad.style.height = 0;
ad.style.overflow = 'hidden';
ad.style.position = 'relative';
ad.style.background = _this.background;
ad.innerHTML = '<a href="' + _this.url + '" target="_blank" style="display:block;margin:0 auto;height:'+_this.height+'px;'+_this.width+'px"><img src="' + _this.imgUrl + '" /></a>';
ad.innerHTML += '<div id="closeAd" style="position:absolute;100px;height:32px;right:0;bottom:0;background:red;color:#fff;line-height:32px;text-align:center;cursor:pointer;">CLOSE</div>';
if (_this.close) {
_this.interval = _this.animate(ad, {
height: parseInt(ad.style.height)
}, {
height: _this.height
}, _this.speed, _this.easeInOut);
_this.close = false;
document.getElementById('closeAd').innerHTML = '关闭';
_this.closeAd(ad);
}
_this.settimeout = setTimeout(function () {
_this.animate(ad, {
height: parseInt(ad.style.height)
}, {
height: -parseInt(ad.style.height) + 32
}, _this.speed, _this.easeInOut);
_this.close = true;
document.getElementById('closeAd').innerHTML = '展开';
}, _this.closeTime);
});
}
}
},
closeAd: function (ad) {//按钮函数
var _this = this;
var toggleBtn = document.getElementById('closeAd');
toggleBtn.onmousedown = function () {
_this.settimeout && clearTimeout(_this.settimeout);
_this.interval && _this.interval();
if (_this.close) {
_this.settimeout = _this.animate(ad, {
height: parseInt(ad.style.height)
}, {
height: _this.height - 32
}, _this.speed, _this.easeInOut);
toggleBtn.innerHTML = '关闭';
_this.close = false;
} else {
_this.settimeout = _this.animate(ad, {
height: parseInt(ad.style.height)
}, {
height: -parseInt(ad.style.height) + 32
}, _this.speed, _this.easeInOut);
toggleBtn.innerHTML = '展开';
_this.close = true;
}
}
},
animate: function (o, start, alter, dur, fx) {//动画函数
var curTime = 0;
var t = setInterval(function () {
if (curTime >= dur) clearInterval(t);
for (var i in start) {
o.style[i] = fx(start[i], alter[i], curTime, dur) + "px";
}
curTime += 40;
}, 40);
return function () {
clearInterval(t);
};
},
easeInOut: function (start, alter, curTime, dur) {//运动算子
var progress = curTime / dur * 2;
return (progress < 1 ? Math.pow(progress, 2) : -((--progress) * (progress - 2) - 1)) * alter / 2 + start;
},
loadImage:function(url, callback) {
var img = new Image(); //创建一个Image对象,实现图片的预下载
img.src = url;
if (img.complete) { // 如果图片已经存在于浏览器缓存,直接调用回调函数
callback.call(img);
return; // 直接返回,不用再处理onload事件
}
img.onload = function () { //图片下载完毕时异步调用callback函数。
callback.call(img);//将回调函数的this替换为Image对象
};
}
};
new AnimeAd({
780, //广告的宽度
height: 300, //广告的高度
speed: 1000, //多少秒内完成展开广告
closeTime: 4000, //自动关闭广告的时间
background:'#f90',
imgUrl: 'http://images.cnblogs.com/cnblogs_com/dreamback/302151/r_banner.png', //图片路径
url: 'http://www.zwbk.org' //点击广告后跳转的链接
});
})();
其它:不知道有没有办法用把这样效果图片广告换成,flash广告 。求高人指点...