滑动块导航(css+div+jquery)

最新推荐文章于 2022-11-20 10:35:09 发布

原创最新推荐文章于 2022-11-20 10:35:09 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#导航 #jQuery

css+div+jquery 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的滑动块导航效果。通过三层布局设计：背景图层、动画效果层及文字显示层，结合jQuery的animate()方法，为网站增添了动态美感。文章提供了完整的HTML与JavaScript代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

滑动块导航

有趣的滑动块导航，可以给网站带来一定的动画效果，给用户良好的体验，先说下简单的思路。

1.在底层有张背景图，

2.中间层放着需要动画效果的图片，或者说是div，可以通过jquery的animate（）动画方法控制运动

3.顶层放着需要显示的文字ul li 等.

思路很简单。看下我的代码吧

原代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">

  <script type="text/javascript" src="jquery-1.9.js"></script>
  <script type="text/javascript">
     
    $(document).ready(function(){ 
			 
       var wapper=$("#nav");

       var stay=$(".current").offset();
 
       $(".plane").offset({left:stay.left,top:stay.top+10});
  
       $('#nav ul li').hover(function(){      
     
       var pos=$(this).offset();
       var left=pos.left+'px';
       $(".plane").stop().animate({left:left},"fast");  
 
       });
   
  });
	 
  </script>
  
  <style type="text/css">
#under
{
  width:900px;
  height:52px;
  margin:0 auto;
  background:url(nav_bg.png) no-repeat;
}
#nav
{
	width:900px;
	height:52px;	
	margin: 0 auto;
	z-index:2;
	position:relative;
	
}
#nav ul li
{
	width:80px;	
	line-height:52px;
	text-align:center;
	font-weight:bold;
	float:left;
	
}
#nav ul li a
{
   text-decoration:none;
   color:blue;
}
#nav ul li a:hover
{
   color:white;
}

#nav .black
{	
	list-style-type:none;
	cursor:pointer;
}
.plane
{
  z-index:1;
  top:50px;
  width:85px;
  height:30px;
  position:absolute;
  float:left;
  background:url(nav_over.png) no-repeat;
  
}


 </style>
 </head>
 <body>
      <div id="under">
      <div id="nav">

      <ul class="black">
              <li class="current"><a href="#">首页</a></li>
		      <li><a href="#">小区新闻</a></li>
		      <li><a href="#">精彩相册</a></li>
		      <li><a href="#">关于小区</a></li>
		      <li><a href="#">论坛</a></li>      
      </ul>

	</div>	
     <div class="plane">
	</div>	

 </body>
</html>

效果图：