[javascript学习指南]javascript带缓冲的文字提示层效果

时间：2017-08-01 来源：php常用代码阅读：

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

<!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/css">
A.menutext{font-family:"宋体"; color:#FFFFFF; font-size:9pt; text-decoration:none;}
A.menutext:visited{color:#FFFFFF;}
A.menutext:hover{color:#FF0033; text-decoration: underline;}
.menubox{width:120; padding-left:0; padding-bottom:5; display:none; position:absolute; background-color: #0066CC; z-index:9;}
</STYLE>
<script language="javascript">
var nonie4 = "noneie.htm";
//设置非ie4++以上版本<a href="http://www.bbyears.com/clist-122-1.html" target="_blank" class="keylink">浏览器</a>的连接页面，因为改菜单只适用于IE4++
var bAnimate = true;
//是否动态展开效果
var nStep = 10;
//动态效果速度
var nDelay = 20;
//动态效果延迟时间
var nChunk; 
var useragent = navigator.userAgent;
//如果检测<a href="http://www.bbyears.com/clist-122-1.html" target="_blank" class="keylink">浏览器</a>不是IE4++以上版本导向上面指定的noneie页面
if (useragent.indexOf("MSIE")==-1) {
	window.location = nonie4;
} else {
	if ((navigator.appVersion.substring(0,1) < 4) || (useragent.indexOf("Windows 3.1") != -1) ||(useragent.indexOf("X11") != -1) ||(useragent.indexOf("Mac") != -1)) {
		window.location = nonie4;
	}
}
//主函数，3个参数分别是ID标志，x,y轴坐标
function doMenu(id, x, y) {
	var thisMenu = document.all(id);
	if (thisMenu == AnimatedMenu) {
		window.event.cancelBubble = true;
		return false;
	}
	if (AnimatedMenu != null) AnimatedMenu.style.display = "none";
	window.event.cancelBubble = true;
	//设置MENU的位置坐标
if( x < 0) {
	x = document.body.clientWidth + x;
}
thisMenu.style.left = x;
thisMenu.style.top = y;
AnimatedMenu = thisMenu;
if (bAnimate) {
	//如果前面设置了动态显示，先初始化一些参数
	thisMenu.style.clip = "rect(0 0 0 0)";
	thisMenu.style.display = "block";
	nChunk = nStep;
	window.setTimeout("showMenu()", nDelay);
} else {
	//不是动态显示，仅显示之
	AnimatedMenu.style.display = "";
	}
}
function showMenu() {
	AnimatedMenu.style.clip = "rect(0 "+ nChunk + "% " + nChunk + "% 0)"
	nChunk += nStep;
	nChunk<=100?window.setTimeout("showMenu()",nDelay):null 
}
function hideMenu(){
	AnimatedMenu.style.display = "none";
	AnimatedMenu = StartMenu;
	window.event.cancelBubble = true;
}
function keepMenu(){
	window.event.cancelBubble = true;
}
document.onmouseover = hideMenu; 
</script>
</head>
<body>

菜单一
菜单二
<script language="javascript">
var AnimatedMenu = StartMenu;
</script>

网易 <BR>
	 新浪 <BR>
	 雅虎 <BR>

Sample Page<BR>
	Sample Page<BR>
	Sample Page<BR>

</body>
</html>

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

[javascript学习指南]javascript带缓冲的文字提示层效果

http://m.bbyears.com/jiaocheng/34511.html

下一篇：php获取ip地址_php中ip地址转换为数字方法