右上角jquery动感滑动导航

稿源：互联网 2022-04-02 21:40:25 点击： 13510 撤稿纠错

页面右上角鼠标感应滑动导航，jquery实现这个动感菜单。

以下讨论的是和右上角 jquery 导航菜单滑动相关的右上角jquery动感滑动导航教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="站长,网页特效,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。全力打造一流网页特效站！" />
<title>站长特效 右上角jquery动感滑动导航菜单 站长特效网</title>
<style>
body {
    margin:0;
    padding:0;
}
#nav li {margin: 0; padding: 0;display: inline;list-style-type: none;font-size: 12px;}
#nav a:link, #nav a:visited {
}
#nav a:hover {color: #fff; background:#FF6A00;}
#nav a:visited.active, #nav a:link.active {background-color: #fff;color: #FF6A00;}
.menu_zzjs_net {
    list-style:none;
    margin: 0;
    float:right;
}
.menu_zzjs_net li {
    float:left;
    margin:0 auto;
    cursor:pointer;
    height:30px;
    padding:30px 5px 5px 5px;
    margin:0px 3px 0px 3px;
    -moz-border-radius: 0px 0px 10px 10px;
    -webkit-border-radius:0px 0px 10px 10px;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    color: #FFF;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    font-family: "Lucida Grande",Lucida,Verdana,sans-serif;
    font-size:13px;
    font-weight:bold;
    text-transform:uppercase;
}
</style>
<script type="text/javascript" src="/img/jquery_zzjs.js"></script>
<script type="text/javascript">
(function($){
    $.fn.extend({
        tagdrop: function(options) {
var defaults = {
    tagPaddingTop: '90px',
    tagDefaultPaddingTop: '30px',
    bgColor: '#B1CCED',
    bgMoverColor: '#7FB0F0',
  textColor: '#e0e0e0',
  textDefaultColor: '#fff'
};//欢迎来到站长特z效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
var options = $.extend(defaults, options);
return this.each(function() {
    var obj = $(this);
    var li_items = $("li", obj);
    $("li", obj).css('background-color', options.bgColor);
    li_items.mouseover(function(){
        $(this).animate({paddingTop: options.tagPaddingTop}, 300);
        $(this).css('background-color', options.bgMoverColor);
        $(this).css('color', options.textColor);
    }).mouseout(function() {
        $(this).animate({paddingTop: options.tagDefaultPaddingTop}, 500);
        $("li",$(this).parent()).css('background-color', options.bgColor);
        $("li",$(this).parent()).css('color', options.textDefaultColor);
    });
});//欢迎来到站z长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
        }
    });
})(jQuery);
</script>
<script type="text/javascript">
$(document).ready(function() {
    $('.menu_zzjs_net').tagdrop({tagPaddingTop: '60px',bgColor: '#B1CCED',bgMoverColor: '#7FB0F0',textColor: '#e0e0e0'});
});//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
</script>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！zzjs.net，站长js特效。<hr>

需要加载js文件，请刷新后看效果。
 <ul class="menu_zzjs_net">
     <li><a href="http://www.zzjs.net">站长特效一号</a></li>
     <li><a href="http://www.zzjs.net">站长特效二号</a></li>
     <li><a href="http://www.zzjs.net">站长特效三号</a></li>
     <li><a href="http://www.zzjs.net">站长特效四号</a></li>
  <li><a href="http://www.zzjs.net">站长特效五号</a></li>
  <li><a href="http://www.zzjs.net">站长特效六号</a></li>
   </ul>
</body>
</html>

关于右上角jquery动感滑动导航的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2011012867209.shtml方便下次再访问哦。

·上一篇： js+css鼠标感应延迟切换选项卡菜单
·下一篇： jquery仿flash鼠标感应横向滑动导航菜单

右上角jquery动感滑动导航

文章分类LIST >>返回首页

最新游戏

最新新闻