澳门萄京赌场网站Jquery达成拉动漫作用的经文二级导航菜单_jquery_脚本之家

澳门萄京赌场网站Jquery达成拉动漫作用的经文二级导航菜单_jquery_脚本之家

豆蔻年华款推动漫效率的优秀二级导航菜单Jquery特效

只是要用JavaScript手动达成动漫效果,必要编写制定特别复杂的代码。借使想要把动漫效果用函数封装起来方便复用,那思量的事情就更加多了。

您大概感兴趣的随笔:

  • 听别人说JQuery的一句话消除手风琴菜单
  • jQuery制作效果相当的厉害的手风琴折叠菜单
  • jquery达成简双手风琴菜单作用实例
  • jQuery实现可进展合拢的手风琴面板菜单
  • jQuery多级手风琴菜单实例批注
  • Jquery 垂直多级手风琴菜单附源码下载

本章节共享大器晚成段代码实例,它达成了手风琴情势开展和折叠导航菜单功用。…

  • 新萄京注册送38,Jquery插件
    • JavaScript
    • jQuery
    • 澳门葡京真人赌场,slideUp
    • slideDown
    • up and down
    • animate
  • Jquery资源
    • JavaScript
    • jQuery
    • 澳门萄京赌场网站,slideUp
    • slideDown
    • up and down
    • animate
  • Jquery特效
    • JavaScript
    • jQuery
    • slideUp
    • slideDown
    • up and down
    • animate
  • Jquery学堂
    • JavaScript
    • jQuery
    • slideUp
    • slideDown
    • up and down
    • animate
  • 享用愉悦
    • JavaScript
    • jQuery
    • slideUp
    • slideDown
    • up and down
    • animate

动画
用JavaScript完结动漫,原理特别简单:大家只要求以固定的时日间隔(比如,0.1秒),每便把DOM成分的CSS样式修改一点(比如,高宽各扩展十三分风姿洒脱),看起来就好像动漫片了。

基于jQuery完毕以手风琴方式开展和折叠导航菜单,jquery导航菜单

本章节享受豆蔻梢头段代码实例,它完成了手风琴情势开展和折叠导航菜单功效。

代码实举个例子下:

代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<meta name="author" content="http://www.bkjia.com/" />
<title>帮客之家</title>
<style>
dl{width:150px;}
dl,dd{margin:0;}
dt{
 background:gray;
 font-size:14px;
 padding:2px;
 margin:2px;
}
dt{color:#FFF;}
dd a{
 color:#000;
 font-size:12px;
}
ul{
 list-style:none;
 padding:2px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function(){
 $("dd:not(:first)").hide();
 $("dt a").click(function(){
  $("dd:visible").slideUp("slow");
  $(this).parent().next().slideDown("slow");
  return false;
 });
});
</script>
</head>
<body>
<dl>
 <dt><a href="#">帮客之家一</a></dt>
 <dd>
  <ul>
   <li><a href="#">div教程</a></li>
   <li><a href="#">css教程</a></li>
   <li><a href="#">jquery教程</a></li>
  </ul>
 </dd>
 <dt><a href="#">帮客之家二</a></dt>
 <dd>
  <ul>
   <li><a href="#">正则教程</a></li>
   <li><a href="#">帮客之家</a></li>
  </ul>
 </dd>
 <dt><a href="#">帮客之家三</a></dt>
 <dd>
  <ul>
   <li><a href="#">ajax教程</a></li>
   <li><a href="#">softwhy.com</a></li>
   <li><a href="#">js教程</a></li>
  </ul>
 </dd>
</dl>
</body>
</html> 

上边包车型地铁代码落成了我们的渴求,上边介绍一下它的完毕进程。

后生可畏.代码注释:

(1).$(document卡塔尔(قطر‎.ready(function(卡塔尔国{}卡塔尔(قطر‎,当文书档案构造完全加载完毕再去施行函数中的代码。
(2).$(“dd:not(:first卡塔尔(قطر‎”卡塔尔国.hide(卡塔尔(قطر‎,除第三个dd元素之外的有所dd成分隐敝,正是首先个导航菜单的子菜单是拓宽的,别的隐讳。
(3).$(“dt
a”卡塔尔(قطر‎.click(function(){}卡塔尔,为dt成分下的a成分注册click事件管理函数。
(4).$(“dd:visible”卡塔尔国.slideUp(“slow”卡塔尔(قطر‎,全部曾经显得的dd成分通过动漫方式减弱掩饰。
(5).$(this卡塔尔.parent(卡塔尔(英语:State of Qatar).next(卡塔尔.slideDown(“slow”卡塔尔国,当前接连a成分的父成分也正是dt元素,dt成分的下一个成分正是二级菜单dd成分,将此菜单以动漫片情势进行。
(6).return false,那个很主要,幸免链接的跳转动作。

如上所述是小编给我们分享基于jQuery实现以手风琴情势展开和折叠导航菜单,希望对大家全体助于。

导航菜单相比较实用,当然依旧选择非凡的,代码起码的,效果最棒的咯,各位童鞋请扫描哦,废话不说,
效果图如下,招待评价: 看代码: 复制代码
代码如下:

show/hide 显示/隐藏

直接以无参数方式调用show(卡塔尔(英语:State of Qatar)和hide(卡塔尔(英语:State of Qatar),会显得和掩瞒DOM成分
而是,只要传递三个时日参数进去,就改成了动画片:

var div = $('#test-show-hide');
div.hide(3000);//3秒中内逐渐消息
时间以毫秒为单位,但也可以是'slow','fast'这些字符串:
var div = $('#test-show-hide');
div.show('slow'); // 在0.6秒钟内逐渐显示
toggle()方法则根据当前状态决定是show()还是hide()

slideUp / slideDown 上海滑稽剧团隐敝/下滑出现

你大概曾经看出来了,show(卡塔尔国和hide(卡塔尔(英语:State of Qatar)是从左上竞争渐开展或缩短的,而slideUp(卡塔尔和slideDown(卡塔尔(英语:State of Qatar)则是在笔直方向渐渐打开或减少的。
slideUp(卡塔尔国把三个可以知道的DOM成分收起来,效果跟拉上窗帘似的,slideDown(卡塔尔(قطر‎相反,而slideToggle(卡塔尔则依据成分是或不是可以预知来调控下一步动作:

var div = $('#test-slide');
div.slideUp(3000);
admin

网站地图xml地图