再发一个仿Flash的jquery滑动菜单，横向

2024-09-05 12:20:45

字体：大中小

来源：转载

供稿：网友

再发一个仿Flash的jquery滑动菜单，横向，延时效果明显，如果觉得延时太长的话，自己可以修改参数，通过这个菜单主要是想向大家掌握一些jQuery生成动画的技巧，同时这也是jquery强大功能的体现。

<!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>再发一个仿Flash的jquery滑动菜单，横向</title><script type="text/javascript" src="/ajaxjs/jquery1.3.2.js"></script><script type="text/javascript" src="/ajaxjs/jquery.hoverIntent.js"></script><script language="javascript">$(function(){			hiConfig = {        				sensitivity: 1,        				interval: 100,         				timeout: 100,         				over: function() {           					var x=$(this).offset().left-$("#menu_bar ul").offset().left;							$("#menu_bar span").animate({left:x+"px",top:'0px'},300);						        }, // function = onMouseOver callback (REQUIRED)        out: function() {} 		}			$("#menu_bar li").hoverIntent(hiConfig)})</script><style>body{text-align:center;font-size:12px;color:#333;font-family:"宋体";background:#fff;margin:0 auto;padding:0;}body > div{text-align:center;margin-right:auto;margin-left:auto;}div,form,ul,ol,li,span,p,dt,dd,dl{border:0;margin:0;padding:0;}img,a img{border:0;margin:0;padding:0;}h1,h2,h3,h4,h5,h6{font-size:12px;font-weight:400;margin:0;padding:0;}ul,ol,li{list-style:none;}td{word-break:break-all;}a{color:#003cc8;text-decoration:none;}a:hover{text-decoration:underline;color:blue;}.f_tahoma{font-family:Tahoma;}em,i{font-style:normal;}#menu_bar{widtH:600px;margin:0 auto;background:#000066; position:relative;height:30px;border:1px solid #CCCCCC}#menu_bar ul{height:30px;overflow:hidden; position:absolute;z-index:2;left:0px;top:0px;line-height:30px;}#menu_bar li{width:100px;float:left;text-align:center;font-size:14px;font-weight:bold}#menu_bar li a{color:#fff}#menu_bar li a:hover{color:#ff7800}#menu_bar span{display:block;position:absolute;background:#fff;filter: alpha(Opacity=40);opacity: 0.4;-moz-opacity: 0.4;-khtml-opacity: 0.4;width:100px;z-index:1;height:30px;left:0px;top:0px;}</style></head><body><div id="menu_bar">	<ul>    	<li>首页</li>        <li>ASP</li>        <li>PHP</li>        <li>ASP.NET</li>        <li>DELPHI</li>        <li>VC++</li>    </ul>    <span></SPAN>
</div>
</div>
<div class=page1>
<p align="center" class="pageLink"></p>
</div>

<div class="fenxiang">

<div style="text-align:left">上一篇：<a href='/wen/2024/09-05/1557685.html'>jQuery动态滑动菜单代码，常用于博客</a></div>
<br>
<div style="text-align:left">下一篇：<a href='/wen/2024/09-05/1557687.html'>阿里妈妈网站顶部滑出的banner工具条代码，带关闭功能</a></div>
<br>
<script src=/d/js/acmsd/gao21.js></script>

</div>

<div class="pinglun">

<script>
		  function CheckPl(obj)
		  {
		  if(obj.saytext.value=="")
		  {
		  alert("您没什么话要说吗？");
		  obj.saytext.focus();
		  return false;
		  }
		  return true;
		  }
		  </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost">

学习交流