jQuery右下角pop弹窗漂浮广告代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery右下角pop弹窗漂浮广告代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,悬浮漂浮,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为jQuery右下角pop弹窗漂浮广告代码，属于站长常用代码" />
<title>jQuery右下角pop弹窗漂浮广告代码</title>
<link href="css/lrtk.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/lrtk.js"></script>
</head>
<body>
<!-- 代码 开始 -->
<div id="main">
  <div id="pop" style="display:none;">
  	<div id="popHead">
		<a id="popClose" title="关闭">关闭</a>
		<h2>赞助广告</h2>
	</div>
	<div id="popContent">
	<a href="#"><img src="images/300x250.jpg"></a>
	</div>
  </div>
<script>
	var popad=new Pop();
</script>
</div>
<!-- 代码 结束 -->

<div style="text-align:center;margin:50px 0">
<p><p>jQuery右下角pop弹窗漂浮广告代码，兼容主流浏览器，程序员设计师联盟淘宝店推荐下载！</p><p><br /></p><p>使用方法：</p><p>1、在head区域引入样式表文件lrtk.css</p><p>2、在head区域引入jquery-1.8.3.min.js和lrtk.js</p><p>3、在你的网页中加入&lt;!-- 代码 开始 --&gt;&lt;!-- 代码 结束 --&gt;注释区域代码即可，图片替换成自己的广告图片。</p><p>4、广告自动关闭时间可在lrtk.js中修改 this.delay=20000; //20秒钟后自动关闭</p></p>
<p style="margin:20px 0"></p>
</div>
</body>
</html>

JS代码(lrtk.js):

//����ie6��fixed����//jQuery(function($j){
	//$j('#pop').positionFixed()//}
)(function($j){
	$j.positionFixed = function(el){
	$j(el).each(function(){
	new fixed(this)}
) return el;
}
$j.fn.positionFixed = function(){
	return $j.positionFixed(this)}
var fixed = $j.positionFixed.impl = function(el){
	var o=this;
	o.sts={
	target:$j(el).css('position','fixed'),container:$j(window)}
o.sts.currentCss ={
	top:o.sts.target.css('top'),right:o.sts.target.css('right'),bottom:o.sts.target.css('bottom'),left:o.sts.target.css('left')}
if(!o.ie6)return;
	o.bindEvent();
}
$j.extend(fixed.prototype,{
	ie6:$.browser.msie && $.browser.version < 7.0,bindEvent:function(){
	var o=this;
	o.sts.target.css('position','absolute') o.overRelative().initBasePos();
	o.sts.target.css(o.sts.basePos) o.sts.container.scroll(o.scrollEvent()).resize(o.resizeEvent());
	o.setPos();
}
,overRelative:function(){
	var o=this;
	var relative = o.sts.target.parents().filter(function(){
	if($j(this).css('position')=='relative')return this;
}
) if(relative.size()>0)relative.after(o.sts.target) return o;
}
,initBasePos:function(){
	var o=this;
	o.sts.basePos ={
	top:o.sts.target.offset().top - (o.sts.currentCss.top=='auto'?o.sts.container.scrollTop():0),left:o.sts.target.offset().left - (o.sts.currentCss.left=='auto'?o.sts.container.scrollLeft():0)}
return o;
}
,setPos:function(){
	var o=this;
	o.sts.target.css({
	top:o.sts.container.scrollTop() + o.sts.basePos.top,left:o.sts.container.scrollLeft() + o.sts.basePos.left}
)}
,scrollEvent:function(){
	var o=this;
	return function(){
	o.setPos();
}
}
,resizeEvent:function(){
	var o=this;
	return function(){
	setTimeout(function(){
	o.sts.target.css(o.sts.currentCss) o.initBasePos();
	o.setPos()}
,1)}
}
}
)}
)(jQuery)//pop���½ǵ�������function Pop(){
	this.apearTime=1000;
	//�������̶�����ʱ��this.hideTime=500;
	this.delay=20000;
	//20���Ӻ��Զ��ر�//��ʾ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();
}
);
}
}

CSS代码(lrtk.css):

/* ����ͼ�� �Ѽ����� www.lanrentuku.com */
html,body,h2{margin:0;}
img{border:none}
#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;}
#popHead #popClose{position:absolute;right:10px;top:1px;}
#popHead a#popClose:hover{color:#f00;cursor:pointer;}

附件:下载该文件资源,减少时间成本(增值服务)