jquery插件开发学习笔记（四）——导航栏特效

最新推荐文章于 2023-06-09 18:37:32 发布

chenqiong1991

最新推荐文章于 2023-06-09 18:37:32 发布

阅读量299

点赞数

分类专栏：学习笔记 jquery插件学习笔记文章标签： jquery插件导航

本文链接：https://blog.csdn.net/chenqiong1991/article/details/68499057

版权

学习笔记同时被 2 个专栏收录

45 篇文章 2 订阅

订阅专栏

jquery插件学习笔记

12 篇文章 0 订阅

订阅专栏

写在前面

想法是：对于一个导航栏，鼠标悬浮于某一项上时，该项高亮，兄弟项正常。鼠标位于导航栏之外时，所有项目正常。

关键代码

<ul>
        <li id="test_1"><a href="">home</a></li>
        <li><a href="">java</a></li>
        <li><a href="">javascript</a></li>
</ul>

 method_:function (options_2) {
              var settings_=$.extend({},defaults_2,options_2);
              return this.each(function () {
                  var $this=$(this);
                  $this.children().mouseover(function () {
                     $this.children().css({color:settings_.color}).parent().siblings().children().css({color:settings_.color_siblings});
                  }).mouseleave(function () {
                      $this.children().css({color:settings_.color_siblings});
                  });
              });
          }

$("li").plugin_2("method_",{color:"#ff0",color_siblings:"#f00"});

由于a标签包裹于li标签之内，所以用了几层children（）和parent（），逻辑很简单：css样式作用于a标签而不是li标签。
调用插件时可设定高亮色和正常色。比如我所设置的，高亮为红，正常为黄。搭配的整体色调为中国国家队队服：西红柿炒鸡蛋。呵呵呵。

全文代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery插件_002</title>
    <script src="../../lib/jquery/jquery.js"></script>
    <style>
        ul{
            background-color: #666;
        }
        li{
            display: inline-block;
            margin: 16px;
        }
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
<nav>
    <ul>
        <li id="test"><a href="">home</a></li>
        <li><a href="">java</a></li>
        <li><a href="">javascript</a></li>
    </ul>
    <br>
    <ul>
        <li id="test_1"><a href="">home</a></li>
        <li><a href="">java</a></li>
        <li><a href="">javascript</a></li>
    </ul>
</nav>

<script>
    (function ($) {
        //默认方法的默认参数组
        var defaults_1={
            back:"#777",
            back_s:"#af8",
            color:"#fff",
            color_s:"#ff0",
            fontSize:"20px"
        };

        //导航栏特效的默认参数组
        var defaults_2={
            color:"#fff",
            color_siblings:"#0a0"
        };

        //插件方法
        var methods={
          inti:function (options) {
              var settings=$.extend({},defaults_1,options);
              return this.each(function () {
                  var $this=$(this);
                  $this.children().css({color:settings.color,backgroundColor:settings.back})
                      .parent().siblings().children().css({color:settings.color_s,backgroundColor:settings.back_s});
              });
          },

          //导航栏特效代码
          method_:function (options_2) {
              var settings_=$.extend({},defaults_2,options_2);
              return this.each(function () {
                  var $this=$(this);
                  $this.children().mouseover(function () {
                     $this.children().css({color:settings_.color}).parent().siblings().children().css({color:settings_.color_siblings});
                  }).mouseleave(function () {
                      $this.children().css({color:settings_.color_siblings});
                  });
              });
          }
        };

        //定义插件
        $.fn.plugin_2=function () {
          var method=arguments[0];
          if(methods[method]){
              method=methods[method];
              arguments = Array.prototype.slice.call(arguments, 1);
          }else if(typeof method==="object"||!method){
              method=methods.inti;
          }else{
              $.error("error happened!");
              return this;
          }
          return method.apply(this,arguments);
        };
    })(jQuery);

    $("#test").plugin_2({color_s:"#f08"});//调用默认方法
    $("li").plugin_2("method_",{color:"#ff0",color_siblings:"#f00"});//调用导航栏特效方法
</script>

</body>
</html>

chenqiong1991

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery插件开发学习笔记（四）——导航栏特效

写在前面想法是：对于一个导航栏，鼠标悬浮于某一项上时，该项高亮，兄弟项正常。鼠标位于导航栏之外时，所有项目正常。关键代码<ul> <li id="test_1"><a href="">home</a></li> <li><a href="">java</a></li> <li><a href="">javascript</a></li></ul> m
复制链接

扫一扫

专栏目录