• 技术文章 >web前端 >js教程

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

    2016-05-16 17:53:58原创964
    其的就不多说啦,直接上代码:
    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:
    复制代码 代码如下:




    Ok啦!
    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:中关村
    上一篇:javascript 在firebug调试时用console.log的方法_javascript技巧 下一篇:ASP.NET中AJAX 调用实例代码_jquery
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• 一文搞定JavaScript的节点操作• JavaScript类数组和可迭代对象的实现原理详解• 带你深入了解HTTP模块• 聊聊Node.js path模块中的常用工具函数• 手把手带你使用node开发一个命令行压缩工具
    1/1

    PHP中文网