zoukankan      html  css  js  c++  java
  • 仿中关村在线首页弹出式广告插件(jQuery版)

    其的就不多说啦,直接上代码:

    jquery 插件:

    /*
    疯狂秀才 制作 于 2012-04-24 17:00 
    QQ: 1055818239
    email: hxl_apple@163.com
    
    */
    (function($){
    	$.fn.quickAd = function(settings){
    		settings = $.extend({
    			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 = '广告剩余 <span id="__sec"></span> 秒    <a href="javascript:;" id="__close_ad">关 闭</a>';
    		//广告内容容器
    		var _adContent = '<div id="'+_adBodyContainerID+'"></div>';
    		//关闭按钮容器
    		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啦!

    附效果图一张:

  • 相关阅读:
    redis实现电商购物车
    redis应用于各种结构型和非结构型高热度数据访问加速
    Redis控制热点新闻的实效性
    Redis实现分表操作id唯一
    KrakenD网关V1.0.0文档初步翻译
    CentOS7环境下安装Chrome
    七夕秀恩爱新姿势!这波操作我给十分!
    小程序&#183;云开发实战
    小程序&#183;云开发实战
    小程序云开发实战
  • 原文地址:https://www.cnblogs.com/hxling/p/2468390.html
Copyright © 2011-2022 走看看