jQuery cookie右下角新闻悬浮层js特效代码

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

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

以下是 jQuery cookie右下角新闻悬浮层js特效代码的示例演示效果:

当前平台(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=utf-8" />
<title>jQuery cookie右下角新闻悬浮层</title>
<script type="text/javascript" src="js/move.js"></script>
</head>
<body>

<link href="css/style.css" rel="stylesheet" type="text/css" />
<div class="float_layer" id="miaov_float_layer" style="z-index:10001;">
	<h2>
		<b>今日推荐</b>
		<a id="btn_min" href="javascript:;" class="min"></a>
		<a id="btn_close" href="javascript:;" class="close"></a>
	</h2>
	<div class="content2">
		<div class="wrap2">
			<ul>
				<li><a class="nl" href="#">右下角可关闭和最小化悬浮层 </a></li>
				<li><a class="nl" href="#">右下角可关闭和最小化悬浮层 </a></li>
				<li><a class="nl" href="#">右下角可关闭和最小化悬浮层 </a></li>
			</ul>
		</div>
	</div>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript" src="js/cookie.js"></script> 
<script type="text/javascript">
$(function (){
     if($.cookie("isClose") != 'yes')
     {
      TanChuang();
      setTimeout("minTanChuang()",5000); //测试5秒自动关闭
     }
});   

function minTanChuang()
{
  $("#btn_min").click();
}

function TanChuang() {
    var oDiv = document.getElementById('miaov_float_layer');
    var oBtnMin = document.getElementById('btn_min');
    var oBtnClose = document.getElementById('btn_close');
    var oDivContent = oDiv.getElementsByTagName('div')[0];

    var iMaxHeight = 0;

    var isIE6 = window.navigator.userAgent.match(/MSIE 6/ig) && !window.navigator.userAgent.match(/MSIE 7|8/ig);

    oDiv.style.display = 'block';
    iMaxHeight = oDivContent.offsetHeight;

    if (isIE6) {
        oDiv.style.position = 'absolute';
        repositionAbsolute();
        miaovAddEvent(window, 'scroll', repositionAbsolute);
        miaovAddEvent(window, 'resize', repositionAbsolute);
    }
    else {
        oDiv.style.position = 'fixed';
        repositionFixed();
        miaovAddEvent(window, 'resize', repositionFixed);
    }

    oBtnMin.timer = null;
    oBtnMin.isMax = true;
    oBtnMin.onclick = function() {
        startMove
    (
      oDivContent, (this.isMax = !this.isMax) ? iMaxHeight : 0,
      function() {
          oBtnMin.className = oBtnMin.className == 'min' ? 'max' : 'min';
      }
    );
    };

    oBtnClose.onclick = function() {
        oDiv.style.display = 'none';
        oDiv.innerHTML = "";
     $.cookie("isClose",'yes',{ expires:1/8640});  //测试关闭十秒后才能再次弹出
    };
  
};
</script>
</body>
</html>

JS代码(move.js):

function miaovAddEvent(oEle,sEventName,fnHandler){
	if(oEle.attachEvent){
	oEle.attachEvent('on'+sEventName,fnHandler);
}
else{
	oEle.addEventListener(sEventName,fnHandler,false);
}
}
function startMove(obj,iTarget,fnCallBackEnd){
	if(obj.timer){
	clearInterval(obj.timer);
}
obj.timer=setInterval(function (){
	doMove(obj,iTarget,fnCallBackEnd);
}
,30);
}
function doMove(obj,iTarget,fnCallBackEnd){
	var iSpeed=(iTarget-obj.offsetHeight)/8;
	if(obj.offsetHeight==iTarget){
	clearInterval(obj.timer);
	obj.timer=null;
	if(fnCallBackEnd){
	fnCallBackEnd();
}
}
else{
	iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
	obj.style.height=obj.offsetHeight+iSpeed+'px';
	((window.navigator.userAgent.match(/MSIE 6/ig) && window.navigator.userAgent.match(/MSIE 6/ig).length==2)?repositionAbsolute:repositionFixed)()}
}
function repositionAbsolute(){
	var oDiv=document.getElementById('miaov_float_layer');
	var left=document.body.scrollLeft||document.documentElement.scrollLeft;
	var top=document.body.scrollTop||document.documentElement.scrollTop;
	var width=document.documentElement.clientWidth;
	var height=document.documentElement.clientHeight;
	oDiv.style.left=left+width-oDiv.offsetWidth+'px';
	oDiv.style.top=top+height-oDiv.offsetHeight+'px';
}
function repositionFixed(){
	var oDiv=document.getElementById('miaov_float_layer');
	var width=document.documentElement.clientWidth;
	var height=document.documentElement.clientHeight;
	oDiv.style.left=width-oDiv.offsetWidth+'px';
	oDiv.style.top=height-oDiv.offsetHeight+'px';
}

CSS代码(style.css):

@charset "utf-8";*{padding:0;margin:0;list-style-type:none;}
body{height:2000px;}
a{text-decoration:none;}
/* float_layer */
.float_layer{border:1px solid #0aa2e6;display:none;}
.float_layer h2{height:25px;line-height:25px;padding-left:10px;font-size:14px;color:#333;background:url(../images/title_bg.gif) repeat-x;border-bottom:1px solid #0aa2e6;position:relative;}
.float_layer .min{width:21px;height:20px;background:url(../images/min.gif) no-repeat 0 bottom;position:absolute;top:2px;right:25px;}
.float_layer .min:hover{background:url(../images/min.gif) no-repeat 0 0;}
.float_layer .max{width:21px;height:20px;background:url(../images/max.gif) no-repeat 0 bottom;position:absolute;top:2px;right:25px;}
.float_layer .max:hover{background:url(../images/max.gif) no-repeat 0 0;}
.float_layer .close{width:21px;height:20px;background:url(../images/close.gif) no-repeat 0 bottom;position:absolute;top:2px;right:3px;}
.float_layer .close:hover{background:url(../images/close.gif) no-repeat 0 0;}
.float_layer .content2{height:130px;width:300px;overflow:hidden;font-size:14px;line-height:18px;color:#666;}
.float_layer .wrap2{padding:10px 10px 4px 10px;}
.wrap2 ul li{line-height:35px;font-size:14px;font-family:'宋体';border-bottom:1px dashed #ccc;padding-left:16px;background:url(/FirstPage/images/list.gif) no-repeat left center;}
.nl{color:#585858;}
a.nl:hover{color:#0378b5;}
li a{font-family:'宋体';font-size:14px;line-height:30px;letter-spacing:1px;}

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