仿flash菜单2(jquery) - 网页特效代码演示

当前位置：网页特效 > 网页特效演示页

菜单导航特效日期时间特效背景图像特效图层样式特效鼠标特效代码页面窗口特效色彩表格特效文字特效代码表单按钮特效计数转换特效游戏网页特效实例网页特效

仿flash菜单2(jquery) - 网页特效代码演示 - 特效代码运行

以下是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>navflash</title>
<style type="text/css">
*{margin:0; padding:0;}
body{background:#6CF url(img/1.jpg);}
#nav{margin:100px auto; width:200px;}
#nav ul{list-style:none; line-height:22px; width:202px; border-top:1px solid #fff;}
#nav ul li{margin:0; padding:0; position:relative; height:22px; width:200px; border:1px solid #FFF; border-top:0; overflow:hidden;}
#nav ul li span{width:200px; height:22px; background:#000; display:block; position:absolute;;}
#nav ul li a{padding:0 10px; text-decoration:none; color:#FFF; width:200px; height:22px; display:block; position:relative;}
</style>
</head>
<body>
<div id="nav">
 <ul>
     <li><span></span><a href="#">导航1</a></li>
        <li><span></span><a href="#">导航2</a></li>
        <li><span></span><a href="#">导航3</a></li>
        <li><span></span><a href="#">导航4</a></li>
    </ul>
</div>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
/**********Power By Mulder*********/
/**********qq:10221408*************/
/**********2008-11-19**************/
$(document).ready(function(){
 $('#nav li span').css('opacity','0.8');   
 $('#nav li').hover(function(){
      $(this).find('span').animate({opacity: '0.3'}, '5');
      $(this).find('a').animate({paddingLeft: '140'}, '5');
       },
        function(){
         $(this).find('span').queue("fx", []);
         $(this).find('span').stop();
         
         $(this).find('a').queue("fx", []);
         $(this).find('a').stop();
         
         $(this).find('span').animate({opacity: '0.8'}, '10000'); 
         $(this).find('a').animate({paddingLeft: '10'}, '10000'); 
         }
        );        
         });
</script>
</body>
</html>
<a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>

[提示：可先修改代码再按运行]

以下是HTML网页特效代码，点击运行按钮可查看效果：

[提示：可先修改代码再按运行]

当前位置：网页特效 > 网页特效演示页

仿flash菜单2(jquery) - 网页特效代码演示 - 特效代码运行

刚被其它网友点击的网页特效

搜索查询面板

本月特效排行

本周特效排行

本日特效排行