纯属翻译了一遍，轻量级的jquery在操作原生DOM上十分方便，而EXTJS形成了一套自己的组件，直接操作DOM树并不是很方便，当然，你也可以象我这样硬来。。
效果如图：
展开前：
展开后：
演示地址：http://www.lierencai.com/zdkjob/stack/
主要代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <head> <title>Demo</title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=gb2312"> <link rel="stylesheet" type="text/css" media="screen" href="css/stack-example3.css"> <style type="text/css"> ul,li { margin:0; padding:0 } </style> <noscript> <style type="text/css"> .stack { top: 0; } .stack ul li { position: relative; } </style> </noscript> <script type="text/javascript" src="js/ext-all.js"></script> <script> Ext.onReady(function(){ var toggle = true; //收缩开关 var lisDom = Ext.query("ul>li"); var lisElement=[]; var ulElement = Ext.get("stack"); for(var i=0;i<lisDom.length;i++){ //将原生DOM转成Ext.Element var extElement = new Ext.Element(lisDom[i]); extElement.imgNode=new Ext.Element(extElement.query('img')[0]); extElement.spanNode=new Ext.Element(extElement.query('span')[0]); //闭包经典用法，添加抖动效果 extElement.on('mouseover',(function(){ var temp = extElement; return function(){ temp.imgNode.animate({to:{ '56px'}}); temp.spanNode.animate({to:{marginRight: '30px'}}); }; })()); extElement.on('mouseout',(function(){ var temp = extElement; return function(){ temp.imgNode.animate({to:{ '50px'}}); temp.spanNode.animate({to:{marginRight: '0px'}}); }; })()); lisElement.unshift(extElement); }; var mainImg =Ext.get("stackimg"); mainImg.on("click",function(){ if(!toggle) { ulElement.animate({to:{top: '-55px', left: '-10px'}}).removeCls('openStack'); Ext.each(lisElement,function(item){ item.animate({ to: { top:'55px', left: '10px' } }); item.imgNode.animate({ to: { 79, marginLeft:'0px' } }); }); mainImg.applyStyles({paddingTop: '35px'}); } else { var vertical = 0; var horizontal = 0; Ext.each(lisElement,function(item){ item.animate({ to: { top: vertical + 'px', left: horizontal + 'px' } }); item.imgNode.animate({ to: { 50 } }); item.imgNode.applyStyles({marginLeft: '9px'}); vertical = vertical + 55; horizontal = (horizontal+.75)*2; }); ulElement.animate({to:{top: '-260px', left: '-10px'}}).addCls('openStack'); mainImg.applyStyles({paddingTop: '0'}); } toggle=!toggle; }) }); </script> </head> <body> <!-- BEGIN STACK ============================================================ --> <div class="stack"> <img id="stackimg" src="images/stacks/stack.png" alt="stack"/> <ul id="stack"> <li><a href="#"><span>Aperture</span><img src="images/stacks/aperture.png" alt="Aperature" /></a></li> <li><a href="#"><span>All Examples</span><img src="images/stacks/photoshop.png" alt="Photoshop" /></a></li> <li><a href="#"><span>Example 3</span><img src="images/stacks/safari.png" alt="Safari" /></a></li> <li><a href="#"><span>Example 2</span><img src="images/stacks/coda.png" alt="Coda" /></a></li> <li><a href="#"><span>Example 1</span><img src="images/stacks/finder.png" alt="Finder" /></a></li> </ul> </div><!-- end div .stack --> <!-- END STACK ============================================================ --> </body> </html>