你的位置:首页 > Java教程

[Java教程]基于jQuery鼠标悬停上下滑动导航条


基于jQuery鼠标悬停上下滑动导航条。这是一款蓝色好看的鼠标响应式网站导航菜单特效。效果图如下:

在线预览    源码下载

实现的代码。

html代码:

 <div id="menu2" class="menu">    <ul>      <li><a href="#">首 页</a></li>      <li><a href="#">预报预警</a></li>      <li><a href="#">气象新闻</a></li>      <li><a href="#">气象服务</a></li>      <li><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 class="cls">    </div>  </div>

Javasctipt代码:

 $(document).ready(function () {      $("#menu2 li a").wrapInner('<span ></span>');      $("#menu2 li a").each(function () {        $('<span >' + $(this).text() + '</span>').appendTo(this);      });      $("#menu2 li a").hover(function () {        $(".out", this).stop().animate({ 'top': '48px' }, 300); // move down - hide        $(".over", this).stop().animate({ 'top': '0px' }, 300); // move down - show      }, function () {        $(".out", this).stop().animate({ 'top': '0px' }, 300); // move up - show        $(".over", this).stop().animate({ 'top': '-48px' }, 300); // move up - hide      });    });

via:http://www.w2bc.com/Article/42960