Heim Web-Frontend js-Tutorial 仿中关村在线首页弹出式广告插件(jQuery版)_jquery

仿中关村在线首页弹出式广告插件(jQuery版)_jquery

May 16, 2016 pm 05:53 PM
中关村

其的就不多说啦,直接上代码:
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:'我是广告内容',
top:130,
sec:5, //广告显示时长,单位秒
border:true //显示外框
},settings);
var fkxc_ad = 0;
var bodyWidth = $(window).width();
var _adBodyContainerID = "bigAd_"+settings.width;
var _adCloseContainerID = "bitAdClose_"+settings.width;
var closeHtml = '广告剩余 关 闭';
//广告内容容器
var _adContent = '
';
//关闭按钮容器
var _adCloseBtn = '
'+closeHtml+'
';
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:
复制代码 代码如下:


<script> <BR>$(function(){ <BR>$('#testad').quickAd({ <BR>html:'<img src="11_523049_88a5614dc705882 (1).jpg" style="max-width:90%"仿中关村在线首页弹出式广告插件(jQuery版)_jquery" >' <BR>}); <BR>}) <BR></script>

Ok啦!
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Ersetzen Sie Stringzeichen in JavaScript Ersetzen Sie Stringzeichen in JavaScript Mar 11, 2025 am 12:07 AM

Ersetzen Sie Stringzeichen in JavaScript

Benutzerdefinierte Google -Search -API -Setup -Tutorial Benutzerdefinierte Google -Search -API -Setup -Tutorial Mar 04, 2025 am 01:06 AM

Benutzerdefinierte Google -Search -API -Setup -Tutorial

Beispielfarben JSON -Datei Beispielfarben JSON -Datei Mar 03, 2025 am 12:35 AM

Beispielfarben JSON -Datei

8 atemberaubende JQuery -Seiten -Layout -Plugins 8 atemberaubende JQuery -Seiten -Layout -Plugins Mar 06, 2025 am 12:48 AM

8 atemberaubende JQuery -Seiten -Layout -Plugins

Erstellen Sie Ihre eigenen AJAX -Webanwendungen Erstellen Sie Ihre eigenen AJAX -Webanwendungen Mar 09, 2025 am 12:11 AM

Erstellen Sie Ihre eigenen AJAX -Webanwendungen

Was ist ' this ' in JavaScript? Was ist ' this ' in JavaScript? Mar 04, 2025 am 01:15 AM

Was ist ' this ' in JavaScript?

Verbessern Sie Ihr JQuery -Wissen mit dem Quell Betrachter Verbessern Sie Ihr JQuery -Wissen mit dem Quell Betrachter Mar 05, 2025 am 12:54 AM

Verbessern Sie Ihr JQuery -Wissen mit dem Quell Betrachter

10 Mobile Cheat Sheets für die mobile Entwicklung 10 Mobile Cheat Sheets für die mobile Entwicklung Mar 05, 2025 am 12:43 AM

10 Mobile Cheat Sheets für die mobile Entwicklung

See all articles