仿中關(guān)村在線首頁(yè)彈出式廣告插件(jQuery版)
更新時(shí)間:2012年05月03日 23:53:41 作者:
仿中關(guān)村在線首頁(yè)彈出式廣告插件(jQuery版) ,需要的朋友可以參考下
其的就不多說(shuō)啦,直接上代碼:
jquery 插件:
/*
瘋狂秀才 制作 于 2012-04-24 17:00
QQ: 1055818239
email: hxl_apple@163.com
*/
(function($){
$.fn.quickAd = function(settings){
settings = $.extend({
width:760,
height:400,
html:'我是廣告內(nèi)容',
top:130,
sec:5, //廣告顯示時(shí)長(zhǎng),單位秒
border:true //顯示外框
},settings);
var fkxc_ad = 0;
var bodyWidth = $(window).width();
var _adBodyContainerID = "bigAd_"+settings.width;
var _adCloseContainerID = "bitAdClose_"+settings.width;
var closeHtml = '廣告剩余 <span id="__sec"></span> 秒 <a href="javascript:;" id="__close_ad">關(guān) 閉</a>';
//廣告內(nèi)容容器
var _adContent = '<div id="'+_adBodyContainerID+'"></div>';
//關(guān)閉按鈕容器
var _adCloseBtn = '<div id="'+_adCloseContainerID+'">'+closeHtml+'</div>';
var self = $(this);
$(this).empty().html(_adContent+_adCloseBtn);
$('#__close_ad').click(function(){
window.clearTimeout(fkxc_ad);
self.fadeOut();
})
if(settings.border){
$('#'+_adBodyContainerID).css('border','1px solid #ccc');
}
$('#'+_adBodyContainerID).empty().html(settings.html).css({
'width':settings.width+'px',
'height':settings.height+'px',
'position': 'fixed',
'z-index': 20000,
'top':settings.top+'px',
'left':(bodyWidth - settings.width) / 2 + 'px'
}).fadeIn('fast');
$('#'+_adCloseContainerID).css({
'width':'160px','height':'18px','line-height':'18px','background-color':'#ccc',
'text-align': 'center', 'opacity': '0.8','top':settings.top+'px','position': 'fixed',
'left':((bodyWidth - settings.width) / 2+(settings.width-160)) + 'px', 'z-index': 20001
}).show();
var daojishi = function (s) {
fkxc_ad = setInterval(function () {
if (s == 0) {
self.fadeOut();
}
$("#__sec").text(s);
s--;
}, 1000);
}
daojishi(settings.sec)
}
})(jQuery)
HTML:
<div id="testad"></div>
<script>
$(function(){
$('#testad').quickAd({
html:'<img src="11_523049_88a5614dc705882 (1).jpg" width=760 height=400 />'
});
})
</script>
Ok啦!
jquery 插件:
復(fù)制代碼 代碼如下:
/*
瘋狂秀才 制作 于 2012-04-24 17:00
QQ: 1055818239
email: hxl_apple@163.com
*/
(function($){
$.fn.quickAd = function(settings){
settings = $.extend({
width:760,
height:400,
html:'我是廣告內(nèi)容',
top:130,
sec:5, //廣告顯示時(shí)長(zhǎng),單位秒
border:true //顯示外框
},settings);
var fkxc_ad = 0;
var bodyWidth = $(window).width();
var _adBodyContainerID = "bigAd_"+settings.width;
var _adCloseContainerID = "bitAdClose_"+settings.width;
var closeHtml = '廣告剩余 <span id="__sec"></span> 秒 <a href="javascript:;" id="__close_ad">關(guān) 閉</a>';
//廣告內(nèi)容容器
var _adContent = '<div id="'+_adBodyContainerID+'"></div>';
//關(guān)閉按鈕容器
var _adCloseBtn = '<div id="'+_adCloseContainerID+'">'+closeHtml+'</div>';
var self = $(this);
$(this).empty().html(_adContent+_adCloseBtn);
$('#__close_ad').click(function(){
window.clearTimeout(fkxc_ad);
self.fadeOut();
})
if(settings.border){
$('#'+_adBodyContainerID).css('border','1px solid #ccc');
}
$('#'+_adBodyContainerID).empty().html(settings.html).css({
'width':settings.width+'px',
'height':settings.height+'px',
'position': 'fixed',
'z-index': 20000,
'top':settings.top+'px',
'left':(bodyWidth - settings.width) / 2 + 'px'
}).fadeIn('fast');
$('#'+_adCloseContainerID).css({
'width':'160px','height':'18px','line-height':'18px','background-color':'#ccc',
'text-align': 'center', 'opacity': '0.8','top':settings.top+'px','position': 'fixed',
'left':((bodyWidth - settings.width) / 2+(settings.width-160)) + 'px', 'z-index': 20001
}).show();
var daojishi = function (s) {
fkxc_ad = setInterval(function () {
if (s == 0) {
self.fadeOut();
}
$("#__sec").text(s);
s--;
}, 1000);
}
daojishi(settings.sec)
}
})(jQuery)
HTML:
復(fù)制代碼 代碼如下:
<div id="testad"></div>
<script>
$(function(){
$('#testad').quickAd({
html:'<img src="11_523049_88a5614dc705882 (1).jpg" width=760 height=400 />'
});
})
</script>
Ok啦!
您可能感興趣的文章:
- js退彈 IE關(guān)閉時(shí)彈出廣告代碼,可以防止屏蔽
- 基于jQuery的網(wǎng)頁(yè)右下角彈出廣告(IE7,firefox)
- 彈出廣告特效代碼(一個(gè)IP只彈出一次)
- jquery右下角自動(dòng)彈出可關(guān)閉的廣告層
- js左右彈性滾動(dòng)對(duì)聯(lián)廣告代碼分享
- JS實(shí)現(xiàn)彈性漂浮效果的廣告代碼
- 彈出廣告特效(一個(gè)IP只彈出一次)的代碼
- emapicn.exe,winpac.exe惡意插件瘋彈廣告解決方法
- JavaScript常用的彈出廣告及背投廣告實(shí)現(xiàn)方法
- JavaScript定時(shí)器制作彈窗小廣告
相關(guān)文章
jquery 無(wú)限級(jí)聯(lián)菜單案例分享
phpcms的地區(qū)級(jí)聯(lián)菜單,感覺(jué)寫(xiě)的挺有意思于是自己也實(shí)現(xiàn)了個(gè),感興趣的各位路過(guò)的可以參考下哈,希望本例可以幫助到你2013-03-03
表單驗(yàn)證插件Validation應(yīng)用的實(shí)例講解
這篇文章的內(nèi)容是表單驗(yàn)證插件Validation應(yīng)用的實(shí)例講解,需要的朋友可以參考下2015-10-10
jQuery插件之jQuery.Form.js用法實(shí)例分析(附demo示例源碼)
這篇文章主要介紹了jQuery插件之jQuery.Form.js用法,結(jié)合實(shí)例形式分析了jQuery.Form.js的具體使用技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-01-01
jQuery函數(shù)的第二個(gè)參數(shù)獲取指定上下文中的DOM元素
這篇文章主要介紹了jQuery函數(shù)的第二個(gè)參數(shù)獲取指定上下文中的DOM元素,需要的朋友可以參考下2014-05-05
Jquery獲取第一個(gè)子元素簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇Jquery獲取第一個(gè)子元素簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
jquery實(shí)現(xiàn)網(wǎng)站列表切換效果的2種方法
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)網(wǎng)站列表切換效果的2種方法,供大家參考,感興趣的小伙伴們可以參考一下2016-08-08
jquery數(shù)據(jù)驗(yàn)證插件(自制,簡(jiǎn)單,練手)實(shí)例代碼
最近項(xiàng)目中js數(shù)據(jù)驗(yàn)證比較多,為了統(tǒng)一風(fēng)格,移植復(fù)用,于是順手封裝了Jquery的插件2013-10-10

