本js效果是主要利用jquery来做的,里面有关于cookie的知识,如果不知道怎么设置请看"js设置cookie实例"。本着条条大路通罗马的原则,当然,你也可以用其它方法来设置cookie。

实现原理主要是判断cookie的值是否还存在。如果存在就不弹,反之弹出窗口。

下面来看一下js端的代码:

$(function(){	
  if(getCookie("qqtan")!="qqtan"){
  setTimeout(alertqq,3000)
	}
	
})

function alertqq(){
	SetCookie("qqtan","qqtan",1);
	var zj=Math.ceil((document.body.clientWidth/2)-(350/2))
	var message=new Array();

	message[0]="前端开发交流";
	message[1]="前端开发爱好者";
	message[2]="web前端开发技术交流";
	message[3]="web前端开发博客推荐";
	message[4]="web技术交流";
	message[5]="web技术爱好";
	message[6]="web技术开发交流";
	message[7]="web前端开发技术交流";
	message[8]="web前端开发博客推荐";
	message[9]="web前端开发技术交流";	
	var sj=Math.random().toString().substr(2,1)
	if($.browser.msie && $.browser.version == "6.0"){
		$("#box_t").css("position","absolute")
	}
	var $a1=$("#box_t");
	
	$("#box_t em").html(message[sj]);

	
	var thegiht=$.browser.msie && $.browser.version == "6.0" ? document.documentElement.scrollTop + 260:260;
	
	$a1.fadeIn("slow");
		$a1.animate({ 
		top:thegiht,
		left:zj
  },600);
  
    fixed("#box_t",thegiht);
    setTimeout(zd,3000)
	$("#box_t .close").click(function(){
		
		  if($(this).html()=="关闭"){$("#box_t").fadeOut("slow");
		  }else{
			 
			  zd();				  
		 }
	})

		
}

function fixed($id, $top) {
	$top = $top == "" ? 0 : $top;
	if ($.browser.msie && $.browser.version == "6.0") {
		$($id).css( {
			"position" : "absolute"
		});
		$(window).scroll(function() {
			if($("#box_t .close").html()=="关闭"){
			var $kfh = document.documentElement.scrollTop + document.documentElement.offsetHeight-123;
			$($id).css("top", $kfh)				
			}else{			
			var $kfh = document.documentElement.scrollTop + $top + "px";
			$($id).css("top", $kfh)
			}
		})
	} else {
		$($id).css( {
			"position" : "fixed"
		})
	}
}

function zd(){
		$("#box_t .close").html("关闭")
		$("#box_t").css({
                 "display":"none","top":"","left":"",
                 "right":"0px","bottom":"0px"})
		$("#box_t").fadeIn("slow")
	}

function SetCookie(name,value,Days)

{

    //var Days=30; //此 cookie 将被保存 30 天

    var exp  = new Date();    //new Date("December 31, 9998");

    exp.setTime(exp.getTime() + Days*24*60*60*1000);

    document.cookie = name+"="+escape(value)+"; expires="+exp.toGMTString()+"; path=/";//path是cookie的访问路径

}

  

function getCookie(name)       

{

    var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));

    if(arr != null) 

    return unescape(arr[2]);

    else 

    return null;



}

这里可以细看一下
下面是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=utf-8" />
<title>无标题文档</title>
</head>
<body>
<script src="http://suiyidian.cn/texiao/jquery-1.3.1.js" language="javascript"></script>
<style type="text/css">
#box_t,#box_t *{ padding:0px; margin:0px; overflow:hidden}
#box_t{ position:fixed; width:350px; height:123px; border:1px dashed #ccc; background:#fff; display:none;z-index:9999;}
#box_t .box_title{ font-size:12px;  color:#CCC;}
#box_t .box_title span{ font-size:14px; color:#555555; font-weight:bold}
#box_t .box_content{ width:330; height: auto; padding:10px}
#box_t .box_content p{ font-size:13px; color:#666666; line-height:18px}
#box_t .box_title{ width:334px; padding:0px 8px; height:35px; line-height:35px; background:#ECECEC}
</style>
<div id="box_t">
<div class="box_title">
<span class="close" style="float:right; display:inline; font-size:12px; cursor:pointer">最小</span><span>邀请提示</span>&nbsp;本信息3秒后自动处理!
</div>
<div class="box_content">
<p>欢迎你访问本博客!web前端开发博主真诚邀请你加入。<br /><strong style="color:red">前端开发交流群:51056097。</strong><br />验证信息是:<em></em><br />请你牢记本站博客:http://suiyidian.cn</p>
</div>
</div>
<p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /></p>
</body>
</html>

在上可以看一上,里面有jqurey库,大家别忘记了。如果要看效果,那就是当你进来我的博客的时个那个效果就是。如果想在看,请先清除浏览器的cookie在刷新我的博客就可以了。

标签: javascript特效, 学习笔记, js+css特效

添加新评论