预览模式: 普通 | 列表

有固定宽度页面的背景广告JS代码

作者:青锋幽灵 日期:2009-07-06 15:37

以下是已经封装的JS类，点击这里查看效果。 

JavaScript代码
  1. /*  
  2.     Powered By CMSDream Copyright © All rights reserved.  
  3. */  
  4. var backgroundAd = {   
  5.     Div: null,   
  6.     IE: 10, /*IE版本*/  
  7.     CD: new Array(1),   
  8.     AD: new Array(1),   
  9.     Config: {   
  10.         adTime: {   
  11.             begin: "2009/7/15 00:00:00",    /*开始时间*/  
  12.             end: "2009/7/16 23:59:59"   /*结束时间*/  
  13.         },   
  14.         Type: 0,        /*0-IE6 背景固定  不等于0-IE6背景浮动*/  
  15.         minWidth: 930,  /*页面最小宽度*/  
  16.         totalWidth: 0,   
  17.         adWidth: 283,   /*广告宽度*/  
  18.         adImage:{   
  19.             left: 'l.gif',    
  20.             right: 'r.gif'  
  21.         },   
  22.         adURL: 'http://get.766.com/go.php?id=2303', /*广告连接地址*/  
  23.         adClick: 0, /*是否允许点击*/  
  24.         bgImage: 'bg.jpg', /*广告背景图片*/  
  25.         bgColor: '#6EE6FE',     /*广告背景颜色*/  
  26.         oldBackground: '',  /*页面原背景*/  
  27.         /*关闭按钮*/  
  28.         closeImage: {   
  29.             src: 'close.jpg',   
  30.             width: 13,   
  31.             height: 13   
  32.         }   
  33.     },   
  34.   
  35.     createAd: function(u){   
  36.         var self = this;   
  37.         var h = document.body.clientHeight;   
  38.         var div = document.createElement('div');   
  39.         with(div.style){   
  40.             if(this.Config.adClick){   
  41.                 cursor = 'pointer';   
  42.             }   
  43.             position = 'absolute';   
  44.             width = this.Config.adWidth + 'px';   
  45.             height = h + 'px';   
  46.             backgroundImage = "url(" + this.Config.adImage[u] + ")";   
  47.             backgroundRepeat = 'no-repeat';   
  48.             backgroundPosition = u + ' 0';   
  49.             backgroundAttachment = 'fixed';   
  50.             top = 0;   
  51.             zIndex = 0;   
  52.             eval(u + ' = '' + (-this.Config.adWidth) + 'px'');   
  53.         }   
  54.         if(this.Config.adClick){   
  55.             div.onclick = function(){   
  56.                 window.open(self.Config.adURL, '_blank');   
  57.             };   
  58.         }   
  59.            
  60.         return div;   
  61.     },   
  62.        
  63.     createClose: function(u){   
  64.         var self = this;   
  65.         var a = document.createElement('a');   
  66.         a.href = '#close';   
  67.         with(a.style){   
  68.             position = 'absolute';   
  69.             width = self.Config.closeImage.width + 'px';   
  70.             height = self.Config.closeImage.height + 'px';   
  71.             top = 0;   
  72.             zIndex = 0;   
  73.             eval(u + ' = '' + (-this.Config.adWidth) + 'px'');   
  74.         }   
  75.         a.onclick = function(){   
  76.             var pp = self.Div.parentNode;   
  77.             pp.removeChild(self.Div);   
  78.             if(self.Config.oldBackground.length > 0)   
  79.             document.body.style.background = self.Config.oldBackground;   
  80.             return false;   
  81.         };   
  82.         a.innerHTML = '<img src="'+this.Config.closeImage.src+'" '+   
  83.             'style="border:0;width:'+this.Config.closeImage.width+'px;height:'+this.Config.closeImage.height+'px;" />';   
  84.         return a;   
  85.     },   
  86.        
  87.     Resize: function(){   
  88.         var w = document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.scrollWidth;   
  89.         var c = w - this.Config.totalWidth;   
  90.         c = c < 0 ? 0 : c;   
  91.         var w1 = (w - this.Config.minWidth - c) / 2 - 2;   
  92.         var w2 = w1 + 2;   
  93.            
  94.         this.AD[0].style.left = (-w1) + 'px';   
  95.         this.AD[0].style.backgroundPosition = - (this.Config.adWidth - w2) + 'px 0';   
  96.         this.AD[1].style.right = (-w1) + 'px';   
  97.         if(this.IE <= 6)   
  98.         this.AD[1].style.backgroundPosition = (this.Config.adWidth - w2) + 'px 0';   
  99.         else  
  100.         this.AD[1].style.backgroundPosition = (w2 + this.Config.minWidth) + 'px 0';   
  101.            
  102.         this.CD[0].style.left = (-w1) + 'px';   
  103.         this.CD[1].style.right = (-w1) + 'px';   
  104.     },   
  105.        
  106.     Scroll: function(){   
  107.         var t = document.body.scrollTop ? document.body.scrollTop : document.documentElement.scrollTop;   
  108.         if(this.IE <= 6 && this.Config.Type > 0){   
  109.             this.AD[0].style.backgroundPosition = '0 ' + t + 'px';   
  110.             this.AD[1].style.backgroundPosition = 'right ' + t + 'px';   
  111.         }   
  112.         this.CD[0].style.top = t + 'px';   
  113.         this.CD[1].style.top = t + 'px';   
  114.         this.Resize();   
  115.     },   
  116.   
  117.     Init: function(){   
  118.         var nd = new Date();   
  119.         var bd = new Date(Date.parse(this.Config.adTime.begin));   
  120.         var ed = new Date(Date.parse(this.Config.adTime.end));   
  121.         if(!(nd.getTime()>bd.getTime() && nd.getTime()<ed.getTime()))return;       
  122.   
  123.         document.body.style.backgroundColor = this.Config.bgColor;   
  124.         document.body.style.background = 'url('+this.Config.bgImage+') fixed';   
  125.         if(navigator.appName == "Microsoft Internet Explorer"){   
  126.             var userAgent = navigator.userAgent;   
  127.             var s = 'MSIE';   
  128.             this.IE = parseFloat(userAgent.substr(userAgent.indexOf(s) + s.length));       
  129.         }   
  130.         this.Config.totalWidth = this.Config.minWidth + this.Config.adWidth * 2;   
  131.            
  132.         this.Div = document.createElement('div');   
  133.         with(this.Div.style){   
  134.             position = 'relative';   
  135.             width = (this.Config.minWidth + 2) + 'px';   
  136.             margin = 'auto';   
  137.             top = '0';   
  138.             zIndex = '0';   
  139.         }   
  140.         document.body.insertBefore(this.Div, document.body.childNodes[0]);     
  141.         this.AD[0] = this.createAd('left');        
  142.         this.AD[1] = this.createAd('right');   
  143.         this.CD[0] = this.createClose('left');   
  144.         this.CD[1] = this.createClose('right');   
  145.         this.Div.appendChild(this.AD[0]);   
  146.         this.Div.appendChild(this.AD[1]);   
  147.         this.Div.appendChild(this.CD[0]);   
  148.         this.Div.appendChild(this.CD[1]);   
  149.   
  150.         var self = this;   
  151.            
  152.         if(document.all){   
  153.             window.attachEvent("onscroll", function(){self.Scroll();});   
  154.             window.attachEvent("onresize", function(){self.Resize();});   
  155.         }else{   
  156.             window.addEventListener("scroll", function(){self.Scroll();},true);   
  157.             window.addEventListener("resize", function(){self.Resize();},true);   
  158.         }   
  159.            
  160.         this.Scroll();   
  161.     }   
  162. };  

 调用方法：

JavaScript代码
  1. if(document.all){   
  2.     window.attachEvent("onload", function(){backgroundAd.Init();});   
  3. }else{   
  4.     window.addEventListener("load", function(){backgroundAd.Init();}, true);   
  5. }  
标签: 背景广告
类别: Javascript | 引用: 0 | 评论: 0 | 阅读: 868 | 打印 | 打包

纯CSS解决DIV垂直居中的样式

作者:青锋幽灵 日期:2009-07-01 16:43

XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>无标题文档</title>  
  6. <style type="text/css">  
  7. .a {width:200px;height:200px;border:1px solid #333;display:table;vertical-align:middle;}   
  8. .a p {position:relative;left:0;top:50%;width:100%;text-align:center;display:table-cell;vertical-align:middle;}   
  9. .a img {height:50px;border:1px solid #f30;position:relative;top:-50%;}   
  10. </style>  
  11. </head>  
  12. <div  
  13. <body>  
  14. <div class="a"><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>  
  15. </body>  
  16. </html>  
标签: CSS 垂直居中
类别: 样式(DIV+CSS) | 引用: 0 | 评论: 0 | 阅读: 934 | 打印 | 打包
  • 1