最新消息:

第81款插件:jquery.adrightbottom.js网页右下角悬浮广告

高级页面 杨红伟 3105浏览 0评论

一、插件介绍

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

这款插件其实实现原理很简单:

一方面利用jquery的代码来实现,如下:

$("#pop").slideDown(1000).delay(1000).fadeOut(1000); 

另一方面是利用 jquery.pos-fixed.js 来解决IE6存在的定位问题,如果不考虑的IE6的用户可以直接访问这个长长的链接进行分析 http://www.ijquery.cn/demo/adrightbottom/adrightbottom-noie6.html 的源代码进行分析,其实主要代码就一句,如下

$(function(){
	$("#pop").slideDown(1000).delay(1000).fadeOut(1000);
	$("#popClose").click(function(){
		$("#pop").hide("fast");
	});
});

这款插件只是集成了两者统一而已!如图:

二、插件作者及下载

插件作者及官网:这款插件是helloweba.com网站作者写的,我只是另起了一个名称,这样方便归类。

插件下载地址:http://www.ijquery.cn/js/jquery.adrightbottom.js

三、参数

比较不同的是,这款插件是在jquery.adrightbottom.js中修改,并没有单独出来。

this.apearTime=1000;  //广告1秒钟出现
this.delay=10000; //持续时间10毫秒

四、最简使用教程

 

HTML代码:

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

var popad=new Pop();

<div id="pop" style="display:none;">
	<div id="popHead">
		<a id="popClose" title="关闭">关闭</a>
		<h2>赞助广告</h2>
	</div>
	<div id="popContent">
		<a href="#" target="_blank"><img src="imgad.jpg"></a>
	</div>
</div>
<script>
	var popad=new Pop();
</script>

 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:0 0 0 10px;}
#popHead h2{font-size:14px;color:#666;line-height:32px;height:32px;text-align:left;}
#popHead #popClose{position:absolute;right:10px;top:1px;cursor:pointer;}
#popHead #popClose:hover{color:#f00;cursor:pointer;}

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址