jQuery右下角悬浮广告

原创

珊瑚贝shb 2023-02-19 00:23:10 ©著作权

文章标签 jquery 前端 javascript ecmascript 开发语言 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者珊瑚贝shb的原创作品，请联系作者获取转载授权，否则将追究法律责任

查看演示

右下角悬浮广告是一种常见的网页广告展示方式，而且对用户浏览有干扰之嫌但对网站收益来说是很受站长们欢迎的。今天我给大家分享一个使用jQuery来实现网页右下角广告的实例。它的优点是可以从右下角缓慢升起，展示一定时间自动消失，并且可以改成网站消息提示窗口。

HTML

首先准备广告素材，并在body中建立一个用户悬浮的广告主体DIV#pop，设置为不显示，在广告的上部标题栏有关闭按钮，点击关闭时，则关闭隐藏悬浮广告。

<div id="pop" style="display:none;"> 
      <div id="popHead"> 
        <a id="popClose" title="关闭">关闭</a> 
        <h2>赞助广告</h2> 
    </div> 
    <div id="popContent"> 
    <a href="http://www.shanhubei.com/" target="_blank"><img src="images/imgad.jpg"></a> 
    </div> 
</div>

CSS

使用CSS稍微美化#pop。注意其实我们使用position:fixed;right:0;bottom:0;其实就已经将广告位置固定在右下角了，但是要兼顾那些IE6的用户，ie6不支持fixed，这个问题我们可以通过jquery的插件来解决ie6的兼容行问题。

#pop{background:#fff;width:300px; height:282px;font-size:12px;position:fixed;right:0;bottom:0;} 
#popHead{line-height:32px;background:#f6f0f3;border-bottom:1px solid #e0e0e0;font-size:12px; 
padding-left:10px;} 
#popHead h2{font-size:14px;color:#666;line-height:32px;height:32px;} 
#popHead #popClose{position:absolute;right:10px;top:1px;} 
#popHead a#popClose:hover{color:#f00;cursor:pointer;}

jQuery

该悬浮广告效果依赖于jQuery，所以在页面载入时别忘了先载入jQuery库文件。

function Pop(){ 
    this.apearTime=1000; 
    this.hideTime=500; 
    this.delay=10000; 
    //显示 
    this.showDiv(); 
    //关闭 
    this.closeDiv(); 
} 
Pop.prototype={ 
  showDiv:function(time){ 
    if (!($.browser.msie && ($.browser.version == "6.0") && !$.support.style)) { 
      $('#pop').slideDown(this.apearTime).delay(this.delay).fadeOut(400);; 
    } else{//调用jquery.fixed.js,解决ie6不能用fixed 
      $('#pop').show(); 
            jQuery(function($j){ 
                $j('#pop').positionFixed() 
            }) 
    } 
  }, 
  closeDiv:function(){ 
      $("#popClose").click(function(){ 
            $('#pop').hide(); 
          } 
    ); 
  } 
}