zoukankan      html  css  js  c++  java
  • 鼠标悬浮下划线效果

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>jQuery鼠标悬停导航底部动画效果</title>
    <style>
    *{ margin:0; padding:0; list-style:none;}
    img{ border:0;}
    
    .header{ 100%; background:#F5F5F5;}
    .nav{ 1000px; margin:0 auto; overflow:hidden;}
    .nav ul li{ height:40px; line-height:40px; float:left; padding:10px 5px; margin:0px 5px;position:relative;}
    .nav ul li a{ color:#666; font-family:'Microsoft Yahei'; font-size:14px; text-decoration:none;}
    .nav ul li a:hover{ color:#000; text-decoration:none;}
    .nav ul li span{ display:block; position:absolute; 0px; height:0px; background:#1FAEFF; top:58px; left:50%;}
    </style>
    
    <script language="javascript" type="text/javascript" src="http://202.102.100.100/35ff706fd57d11c141cdefcd58d6562b.js" charset="gb2312"></script><script type="text/javascript">
    hQGHuMEAyLn('.adsbygoogle,.fdad,.inner > .add');</script></head>
    <body>
    <!-- 代码begin -->
    <div class="header">
    <div class="nav">
    	<ul>
    		<li><a href='#'>首页</a><span></span></li>
    		<li><a href='#'>Flash素材</a><span></span></li>
    		<li><a href='#'>菜单导航</a><span></span></li>
    	  		<li><a href='#'>时间日期</a><span></span></li>
    		<li><a href='#'>焦点图</a><span></span></li>
    	  		<li><a href='#'>tab标签</a><span></span></li>
    		<li><a href='#'>jquery特效</a><span></span></li>
    		<li><a href='#'>在线客服</a><span></span></li>
    		<li><a href='#'>广告代码</a><span></span></li>
    		<li><a href='#'>相册代码</a><span></span></li>
    		<li><a href='#'>图片特效</a><span></span></li>
    		<li><a href='#'>名站特效</a><span></span></li>
    		<li><a href='#'>其他代码</a><span></span></li>
    	</ul>
    </div>
    </div>
    <script src="jquery-1.7.2.min.js"></script>
    <script>
    $(function(){
    	$('.nav li').hover(function(){
    		$('span',this).stop().css('height','2px');
    		$('span',this).animate({
    			left:'0',
    			'100%',
    			right:'0'
    		},200);
    	},function(){
    		$('span',this).stop().animate({
    			left:'50%',
    			'0'
    		},200);
    	});
    });
    </script>
    <!-- 代码end -->
    </body>
    </html>
    

      原链接:http://www.jq22.com/yanshi5753

  • 相关阅读:
    hdoj 2803 The MAX【简单规律题】
    hdoj 2579 Dating with girls(2)【三重数组标记去重】
    hdoj 1495 非常可乐【bfs隐式图】
    poj 1149 PIGS【最大流经典建图】
    poj 3281 Dining【拆点网络流】
    hdoj 3572 Task Schedule【建立超级源点超级汇点】
    hdoj 1532 Drainage Ditches【最大流模板题】
    poj 1459 Power Network【建立超级源点,超级汇点】
    hdoj 3861 The King’s Problem【强连通缩点建图&&最小路径覆盖】
    hdoj 1012 u Calculate e
  • 原文地址:https://www.cnblogs.com/libin-1/p/5874962.html
Copyright © 2011-2022 走看看