jQuery右下角悬浮广告实例

现在许多网站都采用了悬浮广告，这种广告形式既能够吸引用户的注意力，又为网站带来了收益。本文将介绍一种基于jQuery的右下角悬浮广告，具有极佳的实用效果。如果您对此感兴趣，不妨继续阅读。

所谓右下角悬浮广告，是一种在网页右下角展示的广告形式。虽然它可能会对用户浏览造成一定程度的干扰，但对于网站收益的的提升来说，却是站长们乐于采用的方式。下面，我们就来通过一个实例，了解如何使用jQuery实现这种广告效果。

该广告的亮点在于，它能够从右下角缓慢升起，展示一段时间后自动消失。它还可以被改造为网站消息提示窗口，为网站带来更多实用功能。

一、HTML部分

我们需要准备广告素材，并在body中创建一个用于悬浮的广告主体DIVpop，初始时设置为不显示。在广告的上部标题栏，我们添加一个关闭按钮，用户点击后，广告将被隐藏。

HTML代码如下：

二、CSS部分

接下来，我们使用CSS对广告进行美化。关键的一点是使用position:fixed，将广告固定在右下角。考虑到IE6浏览器的兼容性，我们还需要借助jQuery的插件来解决这个问题。

CSS代码如下：

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;}

popHead apopClose:hover{color:f00;cursor:pointer;}

三、jQuery部分

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

JavaScript/jQuery代码如下：

function Pop(){

this.apearTime=1000; // 广告出现时间

this.hideTime=500; // 广告消失时间

this.delay=10000; // 广告展示间隔

//显示广告

this.showDiv();

//关闭广告

this.closeDiv();

}

Pop.prototype={

showDiv:function(time){

//判断是否为IE6浏览器并处理其fixed兼容性问题

if (!($.browser.msie && $.browser.version == "6.0" && !$.support.style)) {

$('pop').slideDown(this.apearTime).delay(this.delay).fadeOut();

} else {

$('pop').show();

jQuery(function($j){

$j('pop').positionFixed(); //调用jquery.fixed插件解决IE6的fixed兼容性问题

});

}

},

closeDiv:function(){

$("popClose").click(function(){

$('pop').hide(); //点击关闭按钮隐藏广告

});

}

} ​

在IE6的环境下，我们需要调用jquery.fixed这个插件来处理fixed的兼容性问题。这个插件已经放在了提供的压缩包中的ads.js文件中，您可以下载后解压使用。通过加载这个插件，我们可以确保广告在IE6浏览器中的正常显示。调用这段代码，轻松实现你的创意效果

想象一下，你只需要简单地写下如下代码：

var popad = new Pop();

神奇的魔力便会在你的屏幕上悄然显现。这个小小的代码片段将为你呈现一个右下角悬浮的广告效果。没错，这就是Pop()的威力，它可以轻松实现你的创意设想。

不仅如此，Pop()的潜力远不止于此。你可以通过向Pop()传入不同的参数，来创造出更多意想不到的效果。例如，它可以变成一个网站消息提示框，及时向你传达的信息或者重要的提醒。这个神奇的工具，将为你打开一扇充满创意的大门。

在这个数字时代，我们每天都在与各种代码打交道。而Pop()的出现，无疑为我们带来了更多的可能性。它简洁、易用，即使是对编程一无所知的人，也能轻松上手。你可以根据自己的需求，随意发挥想象力，创造出无限的效果。

这仅仅是一个开始。对于感兴趣的同学来说，Pop()还有更多的秘密等待你们去。你可以继续深入研究，发掘它更多的功能和应用场景。也许你会发现，Pop()不仅可以用于创建广告效果，还可以用于构建交互式界面、增强用户体验等等。

现在，让我们共同这个充满无限可能的编程世界吧！只需一行代码，就能实现你的创意想法。这就是Pop()的魅力所在。无论你是一个经验丰富的开发者，还是一个对编程充满好奇的新手，都可以通过Pop()来展现你的创造力。让我们一起创造更多的精彩吧！

记得使用Cambrian的render('body')命令来激活你的代码效果。这将使你的创意效果在网页上完美呈现，让你的用户为之惊叹。