网页制作教程

图片等比例放大和缩小的代码

怎么实现滚屏无刷新动态加载内容

insertAdjacentHTML动态插入内容的使用方法

jquery获取值和控制值操作大全

现在的位置: 网页制作教程＞ JS网页特效＞正文

利用jquery实现下拉菜单随鼠标滑过缓慢展开和收起的特效

发表于2014/7/18 ⁄ JS网页特效 ⁄ 0条评论 ⁄ 热度 5,200℃

我们在很多网站上看到过网站导航有下拉菜单，但如何将下拉菜单做得有特色。像网有卖的源码详情页导航就是一个下拉菜单的效果，可以点击这里查看左侧导航的效果。

那么今天给大家带来的一款类似这种有缓慢动作的下拉菜单效果，这种效果必然地是通过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>无标题文档</title>
  <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  <script type="text/javascript"> 
  $(document).ready(function(){
  $(".flip").mouseover(function(){
  $(this).next("div").slideDown(500);
  });
  $(".content").mouseleave(function(){
  $(this).children("div").slideUp(500);
  });
  });
  </script>  
  <style type="text/css"> 
  div.panel,p.flip
  {  
  margin:0px;
  padding:5px;
  text-align:center;
  border:solid 1px #c3c3c3;
  }
  div.panel
  {  
  height:120px;
  display:none;
  }
  </style>  
  <body>
  <div class="content" style="float:left;display:block;width:300px;">
  <p class="flip">网站源码</p>
  <div class="panel">
  <p>asp网站源码</p>
  <p>php网站源码</p>
  </div>
  </div>
  <div class="content" style="float:left;display:block;width:300px;">
  <p class="flip">网站制作教程</p>
  <div class="panel">
  <p>asp网站制作教程</p>
  <p>php网站制作教程</p>
  <p>www.webym.net</p>
  </div>
  </div>
  </body>
  </html>

运行代码提示：您可以先修改部分代码再运行。

运行上面的代码试试，是不是很酷。

声明:如需转载，请注明来源于www.webym.net并保留原文链接：http://www.webym.net/jiaocheng/46.html