jquery melaksanakan kod kesan menu sekunder yang meluncur keluar ke kiri dan kanan seperti fence

jquery melaksanakan kod kesan menu sekunder yang meluncur keluar ke kiri dan kanan seperti fence_jquery

WBOY

Lepaskan： 2016-05-16 15:42:54

asal

1397 orang telah melayarinya

Contoh dalam artikel ini menerangkan kod jquery untuk melaksanakan kod kesan menu sekunder yang meluncur keluar ke kiri dan ke kanan seperti pagar. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Berikut ialah demonstrasi pelaksanaan jquery menu sekunder seperti pagar dan slaid keluar, yang akan meluncur keluar ke kiri atau kanan Ia menyokong bahasa Cina dan Inggeris. Jangan lupa untuk memperkenalkan palam jquery-. dalam apabila menggunakannya.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/jquery-left-right-show-nav-menu-codes/

Kod khusus adalah seperti berikut:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery栅栏菜单左右划出菜单</title>
<title>Grooveshark风格的菜单</title>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<script type="text/javascript">
//jquery.grooveshark.js
jQuery.fn.grooveshark = function() { 
 return this.each(function() {
  var raw = this;
  var elm = jQuery(this);
  var width = elm.width();
  var tel = 1;
  var smw = (width - 150) + 'px';
  jQuery('.ui-gs-panel', raw).css('left', width + 'px').hide();
  jQuery('.ui-gs-panel li', raw).css(width, smw);
  jQuery('.ui-gs-main li', raw).click(function() {
   var panel = jQuery(this).attr('rel');
   jQuery('.ui-gs-main li', raw).each(function() {
    var el = jQuery(this);
    if(el.hasClass('ui-active')) el.removeClass('ui-active');
   });
   jQuery(this).addClass('ui-active');
   jQuery('.ui-gs-main', raw).animate({ width: "150px" }, 1000);
   jQuery('.' + panel, raw).css('z-index', tel += 1).show().animate({ 'left': '150px' }, 1000, function() {
    jQuery('.ui-gs-panel', raw).each(function() {
     if(jQuery(this).hasClass(panel) == false) {
      jQuery(this).css('left', width + 'px');
      jQuery(this).css('z-index', '1');
      jQuery(this).hide();
     }
    });
   });
  });
 });
};
jQuery.fn.backhome = function() {
 return this.each(function() {
  var raw = this;
  var width = jQuery(raw).width();
  jQuery('.ui-active', raw).each(function() {
   jQuery(this).removeClass('.ui-active');
  });
  jQuery('.ui-gs-main', raw).animate({width: '100%'}, 1000).removeClass('ui-active');
   jQuery('.ui-gs-panel', raw).each(function() {
   jQuery(this).animate({'left': width + 'px'}, 1000, function() {
    $(this).hide();
   });
  });
 });
};
</script>
<style type="text/css">
body{font: 12px "Century Gothic", Tahoma, Verdana, Arial, sans-serif;margin: 0;overflow-x: hidden;}
#container{display: block;width: 100%;height: 500px;border-top: 5px solid #ccc;border-bottom: 5px solid #ccc;overflow-x: hidden;position: relative;}
.ui-gs-main{display: block;width: 100%;overflow: hidden;position: absolute;top: 0;left: 0;}
.ui-gs-main ul{list-style: none;margin: 0;padding: 0;}
.ui-gs-main ul li{display: block;width: 100%;padding-top: 15px;padding-bottom: 15px;text-indent: 25px;border-bottom: 1px solid #ccc;}
.ui-gs-main ul li: hover{background: #f0f2f5;}
.ui-gs-panel{display: block;width: 100%;overflow: hidden;position: absolute;top: 0;left: 0;}
.ui-gs-panel ul{list-style: none;margin: 0;padding: 0;}
.ui-gs-panel ul li{display: block;width: 100%;padding-top: 15px;padding-bottom: 15px;text-indent: 25px;border-bottom: 1px solid #ccc;border-left: 1px solid #ccc;background: white;}
.ui-gs-panel ul li: hover{background: #f0f2f5;}
li.ui-active{background: #f0f2f5;}
</style>
<script type="text/javascript">
$(document).ready(function() {
 $('#container').grooveshark();
 $('#backhome').click(function() {
  $('#container').backhome();
 });
});
</script>
 </head>
 <body>
  <div id="container">
   <div class="ui-gs-main">
    <ul>
     <li rel="home">主页</li>
     <li rel="over_ons">作品</li>
     <li rel="portfolio">链接</li>
     <li rel="contact">联系</li>
    </ul>
   </div>
   <div class="ui-gs-panel home">
    <ul>
     <li>最新更新</li>
     <li>热点排行</li>
     <li>时事政治</li>
     <li>喜欢电影</li>
     <li>我的音乐</li>
     <li>我的收藏</li>
     <li>程序人生</li>
     <li>娱乐天地</li>
     <li>婚姻生活</li>
     <li>五花八门</li>
    </ul>
   </div>
   <div class="ui-gs-panel over_ons">
    <ul>
     <li>jquery</li>
     <li>ASP</li>
     <li>PHP</li>
     <li>JAVA</li>
     <li>JSP</li>
     <li>AJAX</li>
     <li>ASP.NET</li>
     <li>VC++</li>
     <li>C#</li>
    </ul>
   </div>
   <div class="ui-gs-panel portfolio">
    <ul>
     <li>百度</li>
     <li>新浪</li>
     <li>网易</li>
     <li>腾讯</li>
     <li>搜狐</li>
     <li>天涯</li>
    </ul>
   </div>
   <div class="ui-gs-panel contact">
    <ul>
     <li>北京</li>
     <li>上海</li>
     <li>天津</li>
     <li>重庆</li>
     <li>成都</li>
     <li>广州</li>
     <li>常州</li>
     <li>深圳</li>
     <li>杭州</li>
     <li>无锡</li>
     <li>郑州</li>
     <li>武汉</li>
    </ul>
   </div>
  </div>
</body>
</html>

Salin selepas log masuk

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan jquery semua orang.