suchen

Heim >Web-Frontend >js-Tutorial >Implementierung einfacher Akkordeoneffekte basierend auf jquery_jquery

Implementierung einfacher Akkordeoneffekte basierend auf jquery_jquery

WBOY
WBOYOriginal
2016-05-16 15:30:011272Durchsuche

Der Akkordeoneffekt ist ein häufig verwendeter Effekt in Projekten. Beispiel J dieses Artikels informiert Sie über die JQuery-Implementierung von einfachem Akkordeon-Spezialeffektcode. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Der Screenshot des Laufeffekts sieht wie folgt aus:

Der spezifische Code lautet wie folgt:

CSS-Stil

/* CSS Document */
body {
  margin: 0 auto;
  padding: 0 auto;
  font-size: 9pt;
  font-family: 微软雅黑, 宋体, Arial, Helvetica, Verdana, sans-serif;
}
.accordion {
  padding-left: 0px;
}
.accordion li {
  border-top: 1px solid #000;
  list-style-type: none;
}
.titlemenu {
  width: 100%;
  height: 30px;
  background-color: #F2F2F2;
  padding: 5px 0px;
  text-align: left;
  cursor: pointer;
}
.titlemenu img {
  position: relative;
  left: 20px;
  top: 5px;
}
.titlemenu span {
  display: inline-block;
  position: relative;
  left: 40px;
}
.submenu {
  text-align: left;
  width: 100%;
  padding-left: 0px;
}
.submenu li {
  list-style-type: none;
  width: 100%;
}
.submenu li img {
  position: relative;
  left: 20px;
  top: 5px;
}
.submenu li a {
  position: relative;
  left: 40px;
  top: 5px;
  text-decoration: none;
}
.submenu li span {
  display: inline-block;
  height: 30px;
  padding: 5px 0px;
}
.hover {
  background-color: #4A5B79;
}

Benutzerdefinierte js

(function ($) {
  piano = function () {
    _menu ='[{"title":"一级目录","img":"images/cog.png","submenu":[{"title":"二级目录","img":"images/monitor_window_3d.png"},{"title":"二级目录","img":"images/monitor_window_3d.png"},{"title":"二级目录","img":"images/monitor_window_3d.png"}]},{"title":"一级目录","img":"images/cog.png","submenu":[{"title":"二级目录","img":"images/monitor_window_3d.png"},{"title":"二级目录","img":"images/monitor_window_3d.png"},{"id":"4","title":"二级目录","img":"images/monitor_window_3d.png"}]}]';
    return ep = {
      init: function (obj) {
        _menu = eval('(' + _menu + ')');
         var li ="";
        $.each(_menu, function (index, element) {
          li += '<li><div class="titlemenu"><img src=' + element.img + ' width="16" height="16" alt=""/><span>' + element.title + '</span></div>';
          if(element.submenu!=null)
          {
            li+='<ul class="submenu">';
            $.each(element.submenu, function (ind, ele) {
              li += '<li><img src=' + ele.img + ' width="16" height="16" alt=""/><span><a href="#">' + ele.title + '</a></span></li>';
            });
            li+='</ul>';
          }
          li+='</li>';
        });
        obj.append(li);
      }
    }
  }

  $.fn.accordion = function (options) {
    var pia = new piano();
    pia.init($(this));
    return this.each(function () {
      var accs = $(this).children('li');
       accs.each(reset);
      accs.click(onClick);
      var menu_li = $(".submenu").children("li");
      menu_li.each(function (index, element) {
        $(this).mousemove(function (e) {
          $(this).siblings().removeClass("hover");
          $(this).find("a").css("color", "#fff");
          $(this).siblings().find("a").css("color", "#000");
          $(this).addClass("hover");
        });
      });
    });
  }

  function onClick() {
    $(this).siblings('li').find("ul").each(hide);
    $(this).find("ul").slideDown('normal');
    return false;
  }

  function hide() {
    $(this).slideUp('normal');
  }

  function reset() {
    $(this).find("ul").hide();
  }
})(jQuery);

HTML-Aufrufmethode

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="jquery-1.8.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="accordion.js"></script>
<script type="text/javascript">      
  $(function(){
    $("#accordion").accordion();
  });
</script>
</head>
<body>
<ul id="accordion" class="accordion" style="width:200px;height:500px;">
</ul>
</body>
</html>

Ich hoffe, dass dieser Artikel Ihnen dabei hilft, die JQuery-Programmierung zu erlernen und die Akkordeon-Spezialeffekte besser zu beherrschen. Ich hoffe, dass Sie unter dem Artikel verlinkt sind.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Sprechen Sie über die Erklärung von Prototypen und Prototypattributen sowie über gängige Methoden in js_javascript-KenntnissenNächster Artikel：Sprechen Sie über die Erklärung von Prototypen und Prototypattributen sowie über gängige Methoden in js_javascript-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen