仿中關(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)文章
再分享70+免費(fèi)的jquery 圖片滑塊效果插件和教程
這些jQuery插件同樣可以實(shí)現(xiàn)圖片和內(nèi)容的滑塊效果。下面的這些jQuery插件的Demo網(wǎng)站我都測(cè)試了一些,都可以正常訪問(wèn),我相信那么多款插件中總會(huì)有你喜歡的2014-12-12jQuery實(shí)現(xiàn)隔行變色的方法分析(對(duì)比原生JS)
這篇文章主要介紹了jQuery實(shí)現(xiàn)隔行變色的方法,結(jié)合實(shí)例形式對(duì)比原生JS實(shí)現(xiàn)隔行變色的相關(guān)技巧,給出了2種jQuery實(shí)現(xiàn)隔行變色的方法,需要的朋友可以參考下2016-11-11jQuery實(shí)現(xiàn)的下雪動(dòng)畫(huà)效果示例【附源碼下載】
這篇文章主要介紹了jQuery實(shí)現(xiàn)的下雪動(dòng)畫(huà)效果,涉及jQuery插件結(jié)合setInterval、animate進(jìn)行動(dòng)畫(huà)操作的相關(guān)使用技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2018-02-02BootStrap日期控件在模態(tài)框中選擇時(shí)間下拉菜單無(wú)效的原因及解決辦法(火狐下不能點(diǎn)擊)
今天同事讓我?guī)退黄鸾鉀Q一個(gè)問(wèn)題,關(guān)于兼容的bug問(wèn)題,在火狐中使用模態(tài)框加載日期控件時(shí)選擇時(shí)間下拉菜單沒(méi)有效果(不能點(diǎn)擊),而在谷歌中卻是好的,下面小編附上原因分析及解決辦法,有需要的朋友可以參考下2016-08-08jquery實(shí)現(xiàn)通用的內(nèi)容漸顯Tab選項(xiàng)卡效果
這篇文章主要介紹了jquery實(shí)現(xiàn)通用的內(nèi)容漸顯Tab選項(xiàng)卡效果,涉及jquery通過(guò)時(shí)間函數(shù)定時(shí)觸發(fā)頁(yè)面元素樣式變換的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09