教程集 > jQuery > jquery 教程 > 正文 javascript带缓冲的文字提示层效果

javascript带缓冲的文字提示层效果

发布时间：2023-12-20 编辑：jiaochengji.com

教程集为您提供javascript带缓冲的文字提示层效果等资源，欢迎您收藏本站，我们将为您提供最新的javascript带缓冲的文字提示层效果资源

本文章是一种具有缓存效果的文字提示层效果，当用户经过时就会逐渐展开文章提示，是非常不错的效果。

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

<!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  以上版本浏览器的连接页面，因为改菜单只适用于IE4    var bAnimate = true;  //是否动态展开效果  var nStep = 10;  //动态效果速度  var nDelay = 20;  //动态效果延迟时间  var nChunk;   var useragent = navigator.userAgent;  //如果检测浏览器不是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>    <span id="StartMenu" style="display:none; position:absolute;"></span>  菜单一  菜单二  <script language="javascript">  var AnimatedMenu = StartMenu;  </script>  <span id="menu1" onmouseover="keepMenu();" class="menubox">  	 网易 <br>  	 新浪 <br>  	 雅虎 <br>  </span>  <span id="menu2" onmouseover="keepMenu();" class="menubox">  	Sample Page<br>  	Sample Page<br>  	Sample Page<br>  </span>  </body>  </html></td>  	  </tr>  	</table>

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

您可能感兴趣的文章：
PHP基础之输出缓冲区基本概念、原理分析
 网站顶部带缓冲打开和关闭功能的横栏提示层js代码
 PHP输出缓冲及其应用的例子
 javascript缓冲效果的伸缩下拉藏层
 php函数ob_start()、ob_end_clean()、ob_get_contents()
php输出缓存ob系列函数用法
 采用PEAR来缓冲PHP程序
 mysql中的query_cache_limit进行数据库优化
 js展开收缩层的效果
 用缓冲技术提高JSP应用的性能和稳定性

上一篇：javascript中鼠标移动到文本上弹出可移动可关闭窗口层的代码下一篇：状态栏显示标准时钟

[关闭]

javascript带缓冲的文字提示层效果

最近更新

浏览排行