jQuery版感应鼠标花式翻滚效果导航条

网页特效

网站首页菜单导航日期时间背景图像图层样式鼠标键盘页面窗口色彩表格链接文字表单按钮计数转换游戏娱乐综合实例

您的位置: 网页特效 -> 菜单导航 -> jQuery版感应鼠标花式翻滚效果导航条

jQuery版感应鼠标花式翻滚效果导航条

作者:佚名发布时间:2011-5-6 7:03:35 发布人: admin

<!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=gbk"/>
<title>jQuery版感应鼠标花式翻滚效果导航条</title> 
<style type="text/css">
html { background: #1d1d1d; }
body {
 margin: 0; padding: 0;
 font: 10px normal Verdana, Arial, Helvetica, sans-serif;
 background: #1d1d1d; 
}
h1 {
 font: 4.7em normal Georgia, 'Arial', Times, serif;
 color: #fff;
 margin: 0;
 text-align: center;
 padding: 5px 0;
}
h1 small{
 font: 0.2em normal Verdana, Arial, Helvetica, sans-serif;
 text-transform:uppercase;
 letter-spacing: 1.4em;
 display: block;
 color: #ccc;
}
.container {
 width: 960px;
 
 margin:0px auto;
 overflow: hidden;
}
img {border: none;}
ul#topnav {
background: url(/web/20150328141824im_/http://myjs.jz123.cn/js/caidan/a_bg.gif) repeat-x;
 margin: 10px 0 20px; 
 padding: 0; 
 list-style: none; 
 font-size: 1.1em;
 clear: both;
 float: left;
 width:100%;
 
}
ul#topnav li{
 margin: 0; 
 padding: 0; 
 overflow: hidden; 
 float: left; 
 height:40px;
}
ul#topnav a, ul#topnav span {
 padding: 10px 20px; 
 float: left; 
 text-decoration: none; 
 color: #fff;
 text-transform: uppercase;
 clear: both;
 height: 20px;
 line-height: 20px;
 background: #1d1d1d; 
}
ul#topnav a { color: #7bc441; }
ul#topnav span {
 display: none;
}

ul#topnav.v2 span{
 background: url(/web/20150328141824im_/http://myjs.jz123.cn/images/20110504/a_bg.gif) repeat-x left top;
}
ul#topnav.v2 a{
 color: #555;
 background: url(/web/20150328141824im_/http://myjs.jz123.cn/images/20110504/a_bg.gif) repeat-x left bottom;
}
</style>
<script type="text/javascript" src="/web/20150328141824js_/http://myjs.jz123.cn/images/jquery-1.2.6.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $("#topnav li").prepend("<span></span>");  
 $("#topnav li").each(function() { 
  var linkText = $(this).find("a").html(); 
  $(this).find("span").show().html(linkText); 
 }); 
 $("#topnav li").hover(function() { 
  $(this).find("span").stop().animate({ 
   marginTop: "-40" //偏移  www.16sucai.com
  }, 250);
 } , function() { 
  $(this).find("span").stop().animate({
   marginTop: "0" 
  }, 250);
 });
});
</script>
</head>
<body>
<div class="container">
 <ul id="topnav" class="v2">
  <li><span>芯晴网页特效</span><a href="#">网页特效</a></li>
  <li><span>团购导航</span><a href="#">团购导航</a></li>
  <li><span>Qvod电影</span><a href="#">Qvod电影</a></li>
  <li><span>问问社区</span><a href="#">问问社区</a></li>
  <li><span>生活常识</span><a href="#">生活常识</a></li>
  <li><span>网页教程</span><a href="#">网页教程</a></li>
  <li><span>编程开发</span><a href="#">编程开发</a></li>
  <li><span>数据库素材</span><a href="#">数据库素材</a></li>
  <li><span>网站模板</span><a href="#">网站模板</a></li>
 </ul>
</div>
</body>
</html>

jQuery版感应鼠标花式翻滚效果导航条

将本文收藏到QQ书签与更多好友分享

上一篇：文章：简洁标准的DIV/UL/LI列表形式的CSS横向菜单下一篇：文章：CSS+JS实现兼容性很好的无限级下拉菜单

网页特效

jQuery版感应鼠标花式翻滚效果导航条

本类浏览排行 »

本站推荐文章 »