当前位置:asp编程网>技术教程>Javascript教程>  正文

mootools实例:慢慢展开和关闭一个div层的动画效果

1970-01-01 08:00:00   来源:www.aspbc.com    作者:wangsdong   浏览量:2992   收藏

当前台的产品分类有几层分类,而前台页面能够展示出来分类的地方大小有限,这样就需要用到这种功能:先将一级分类展示出来,当点击一级分类的时候,慢慢地展开该分类下面的子分类;再次点击这个一级分类的时候,该分类下面的子分类又慢慢收缩回去,关闭掉。这里使用mootools来写相关的代码。

<style type="text/css">
ul { margin:0px; padding:0px;  list-style-type:none;}
#title{ line-height:30px; background-color:#00F; cursor:pointer; width:480px; color:#FFF; padding-left:20px; }
#showdiv{ display:block; height:0px; overflow:hidden; }
#showdiv li { width:480px; line-height:25px; height:25px; padding-left:20px; background-color:#ccc; border-bottom:1px solid #fff; }
</style>
<script type="text/javascript" src="http://www.aspbc.com/js/mootools.js"></script>
<script type="text/javascript">
//当页面加载完后
window.addEvent('domready',function(){
  //展开和关闭动画
 $('title').addEvent('click',function(){
  if($(this).get("status")==0){			
     $(this).set('status',1);
     $(this).set('html','点击关闭子分类');	
     $('showdiv').tween('height', '130px');
   }
   else
   {
      $(this).set('status',0);
      $(this).set('html','点击展开子分类');
      $('showdiv').tween('height', '0px');
    }
 });
});
</script>
<div id="title" status="0" >点击展开子分类</div>
<ul id="showdiv">
	<li id="new_1">子分类1</li>
	<li id="new_2">子分类2</li>
	<li id="new_3">子分类3</li>
	<li id="new_4">子分类4</li>
	<li id="new_5">子分类5</li>
</ul>
(鼠标移到代码上去,在代码的顶部会出现四个图标,第一个是查看源代码,第二个是复制代码,第三个是打印代码,第四个是帮助)

把以上代码保存为html文件,双击运行即可看到效果。

总结一下以上用到的知识点:
1、window.addEvent('domready',function(){……}); 页面加载完后js代码。

2、$('title').addEvent('click',function(){……}); 给某一ID绑定onclick事件。

3、$('title').get("status") 获取ID='title'的自定义属性status的值。
     $('title').set('status',0);给ID='title'的自定义属性status赋值。 这里这个属性是用来判断子分类当前属于展开状态还是关闭状态,以便下面对它进行的操作。

4、$('title').set('html','点击关闭子分类'); 给id='title'的html属性赋值,同js中的innerHTML="值"。

5、$('showdiv').tween('height', '130px'); 让id='showdiv'的层的高度慢慢地由0px变成130px,以达到动画效果。

原创文章,转载请注明来源:asp编程网(www.aspbc.com),谢谢。

 



 



关于我们-广告合作-联系我们-积分规则-网站地图

Copyright(C)2013-2017版权所属asp编程网