jquery垃圾筐菜单效果，用EXTJS实现

纯属翻译了一遍，轻量级的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:{width: '56px'}});                        
                                temp.spanNode.animate({to:{marginRight: '30px'}});
                            };    
                    })());

                    extElement.on('mouseout',(function(){
                            var temp = extElement;
                            return function(){
                                temp.imgNode.animate({to:{width: '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: {
                                        width: 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: {
                                        width: 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&nbsp;Examples</span><img src="images/stacks/photoshop.png" alt="Photoshop" /></a></li>
            <li><a href="#"><span>Example&nbsp;3</span><img src="images/stacks/safari.png" alt="Safari" /></a></li>
            <li><a href="#"><span>Example&nbsp;2</span><img src="images/stacks/coda.png" alt="Coda" /></a></li>
            <li><a href="#"><span>Example&nbsp;1</span><img src="images/stacks/finder.png" alt="Finder" /></a></li>            
        </ul>
    </div><!-- end div .stack -->
    <!-- END STACK ============================================================ -->

</body>
</html>

 

posted @ 2012-07-04 16:02  zdkjob  阅读(474)  评论(0)  编辑  收藏  举报