简单的js 感应鼠标闪烁背景的导航菜单效果

时间：2011-08-17 编辑：简简单单来源：一聚教程网

提示：您可以先修改部分代码再运行

<!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>
<title>感应鼠标闪烁背景的导航菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">

<style type="text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>">
body{background:#000;}
div{margin:0;padding:0;}
.wrap{position:relative;border:1px solid #eee;float:left;}
.wrap div{position:absolute;}
.colordiv{filter:alpha(opacity=0);opacity:0;z-index:4;background:#F09;}
.borderdiv{border:1px solid #fff;z-index:5;left:50%;top:50%;margin-left:-95px;margin-top:-45px;opacity:0;filter:alpha(opacity=0);}
.top{z-index:10;line-text-align:center;font-weight:bolder;cursor:pointer;color:#fff;}
</style>
</head>
<body>

<div class="wrap">
	<div class="colordiv" id="colordiv"></div>
	<div class="borderdiv" id="borderdiv"></div>
    <div class="top" id="to">加入游戏</div>
</div>
<div class="wrap">
	<div class="colordiv" id="colordiv1" style="background:#399"></div>
	<div class="borderdiv" id="borderdiv1"></div>
	<div class="top" id="to1">返回游戏</div>
</div>
<div class="wrap">
	<div class="colordiv" id="colordiv2" style="background:#F96"></div>
	<div class="borderdiv" id="borderdiv2"></div>
	<div class="top" id="to2">退出游戏</div>
</div>
<script>
var x=window.x||{};
//=======================================
//**********公用函数**********************
//=======================================
x.run=function(t,b,c,d){
	var t=t/d;
	if(t<0.4){
	return [(5/2*t-1)*(5/2*t-1)*(5/2*t-1)+1]*c+b}
	if(t<0.5){
		return [400*[-(t-0.45)*(t-0.45)]+1+1]*c+b;
		}
		if(t<0.6){
		return [800/3*[-(t-0.55)*(t-0.55)]+2/3+1]*c+b;
		}
		if(t<0.7){
		return [400/3*[-(t-0.65)*(t-0.65)]+1/3+1]*c+b;
		}
		if(t<0.8){
		return [400*[-(t-0.75)*(t-0.75)]+1+1]*c+b;
		}
		if(t<0.9){
		return [800/3*[-(t-0.85)*(t-0.85)]+2/3+1]*c+b;
		}
		if(t<1){
		return [400/3*[-(t-0.95)*(t-0.95)]+1/3+1]*c+b;
		}
	}
x.bor=function(t,b,c,d){
	var t=t/d
	return c*t*t+b;
	}
x.fade=function(t,b,c,d){
		var t=t/d;
		return c*(t-1)*(t-1)+b;
}
x.getcss=function(obj,pro){
	if(obj.currentStyle){
		return obj.currentStyle[pro]
		}else{
			return document.defaultView.getComputedStyle(obj,null)[pro];
			}
	}
x.$=function(id){ return document.getElementById(id)};
//======================================================
//x.c参数说明
// idtop：最上面的层
// idcolor：颜色层，根据时间变化来显示这个层得不透明度
// idborder：border层，显示里面的边框
//t：时候增量
//b：初始值
//c：基于初始值的变化量
//d：总时间
x.c=function(idtop,idcolor,idborder,t,b,c,d){
	var o=x.$(idtop);
	var k=x.$(idcolor);
	var n=x.$(idborder);
	o.t=t;
	o.b=b;
	o.c=c;
	o.d=d;
	o.s=null;
	o.v=null;
	o.r=0;
	o.onmouseover=function(){
		o.r=0;
		if(o.v){clearInterval(o.v)}
		o.s=setInterval(function(){
			o.t++;
			if(o.t<o.d){
			//	n.style.px";
			//	n.style.px";
			//	n.style.left=x.fade(o.t,0,50,o.d)+"%";
			//	n.style.top=x.fade(o.t,0,50,o.d)+"%";
			//	n.style.marginLeft=x.fade(o.t,0,-25,o.d)+"px";
			//	n.style.marginTop=x.fade(o.t,0,-25,o.d)+"px";
			//	n.style.opacity=x.run(o.t,o.b,o.c,o.d);
			//	n.style.filter="alpha(opacity="+x.run(o.t,o.b,o.c,o.d)*100+")"
				k.style.opacity=x.run(o.t,o.b,o.c,o.d);
				k.style.filter="alpha(opacity="+x.run(o.t,o.b,o.c,o.d)*100+")"
				}
			else{clearInterval(o.s)}
			},1)
		}
	o.onmouseout=function(){
		if(o.s)clearInterval(o.s);
		o.t=0;
		k.opacity=x.getcss(k,'opacity');
		o.v=setInterval(function(){
			o.r++;
			if(o.r<=o.d){
				n.style.opacity=x.fade(o.r,o.b,k.opacity,o.d);
				n.style.filter="alpha(opacity="+x.fade(o.r,o.b,k.opacity,o.d)*100+")"
				k.style.opacity=x.fade(o.r,o.b,k.opacity,o.d);
				k.style.filter="alpha(opacity="+x.fade(o.r,o.b,k.opacity,o.d)*100+")"	
				}
			else{clearInterval(o.v)}
			},10)
		}
	}
x.c("to","colordiv","borderdiv",0,0,0.4,50)
x.c("to1","colordiv1","borderdiv1",0,0,0.4,50)
x.c("to2","colordiv2","borderdiv2",0,0,0.4,50)
</script>
</body>
</html>

提示：您可以先修改部分代码再运行

上一个：兼容IE6的页面底部固定层代码
下一个： table 鼠标悬停效果

推荐专题

最新下载

热门教程

简单的js 感应鼠标闪烁背景的导航菜单效果

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程