在iframe里的页面编写js，实现在父窗口上创建动画效果展开和收缩的div（不变动iframe父窗口代码）

<% @ page contentType = " text/html; charset=GBK "  language = " java " %>
<% @ page import = " com.jstrd.mm.business.sysmgr.monitor.logic.MMStock2BudgetLogic "   %>
<%
String  query  =  request.getParameter( " query " );
MMStock2BudgetLogic bean  =   new  MMStock2BudgetLogic();
String  xmldata  =  bean.statStock2Budget();
%>
< html >
     < head >
         < meta  http-equiv ="Content-Type"  content ="text/html; charset=GBK" >
         < META  HTTP-EQUIV ="Pragma"  CONTENT ="no-cache" >
         < META  HTTP-EQUIV ="Cache-Control"  CONTENT ="no-cache" >
         < META  HTTP-EQUIV ="Expires"  CONTENT ="0" >
         < title >库存点采购总支出比 title >
         < link  rel ="stylesheet"  href ="<%=request.getContextPath() %>/plugins/FusionCharts/Style.css"  type ="text/css"   />
         < link  rel ="stylesheet"  href ="<%=request.getContextPath() %>/framework/sys-resources/css/jsoa.css"  type ="text/css"   />
         < script  language ="Javascript"  src ="<%=request.getContextPath() %>/plugins/FusionCharts/FusionCharts.js" > script >
         < script  language ="Javascript"  src ="<%=request.getContextPath() %>/plugins/jquery-1.6.4.min.js" > script >
         < script  language ="Javascript"  src ="<%=request.getContextPath() %>/framework/sys-resources/js/common_js/common.js" > script >
        
         < script  language ="Javascript" >
             var  pageName  =   " 530005.jsp " ;
            $( function (){
                 if  ($( ' #data_chartdiv ' ).val()  !=   '' ) {
                    showCharts( " Line " ,  " chartdiv " ,  231 ,  160 );
                }
            });
             function  showCharts(chartType, divId, width, height) {
                $( ' # ' + divId).show();
                 var  data  =  $( ' #data_ '   +  divId).val();
                 var  chart  =   new  FusionCharts( " <%=request.getContextPath() %>/plugins/FusionCharts/ " + chartType + " .swf " ,  "" + divId + "" ,  "" + width + "" ,  "" + height + "" ,  " 0 " ,  " 0 " );
                chart.setDataXML( ' '   +  data);
                chart.render( "" + divId + "" );
            }
         script >
         < script  type ="text/Javascript" >
         var  oMenu;
         function  createHtml() {
             try {
                 // oMenu = window.parent.document.getElementById("_div_viewcharts");
                 // if(null == oMenu || undefined == oMenu) {
                     var  url1  =   " <%=request.getContextPath()%>/framework/login_sso.jsp?query=<%=query %>&infokey=checkuser&rand= " + Math.random();
                     var  url2  =   " <%=request.getContextPath()%>/framework/login_sso.jsp?query=<%=query %>&target=/stat_report_jsps/fusioncharts_jsps/53000501.jsp&rand= " + Math.random();
                    $.post(url1,  function (data) {
                        data  =  eval( ' ( ' + data + ' ) ' );
                         // alert(data.msg);
                         if  ( 1   ==  data.ret) {
                             var  o  =  document.getElementById( " _div_viewcharts " );
                            window.parent.document.body.appendChild(o);
                            oMenu  =  window.parent.document.getElementById( " _div_viewcharts " );
                             var  ifrm  =  getIFrame();
                            oMenu.style.left  =  eval(getAbsoluteLeft(ifrm)  +  ifrm.offsetWidth)  +   " px " ;
                            oMenu.style.top  =  getAbsoluteTop(ifrm)  +   " px " ;
                            oMenu.innerHTML  =   ' ' ;
                             //
                            $( ' #pTip ' ).text( ' ×关闭<< ' );
                            oMenu.style.display  =   " block " ;
                            fnLarge();
                        }
                    });
                 // }
            }  catch  (e){ }
        }
         //
         var  w  =   0 ;
         var  h  =   0 ;
         var  mout;
         function  emotion(){
             try {
                 if (w  <=   50 ){
                    oMenu  =  window.parent.document.getElementById( " _div_viewcharts " );
                     if ( null   ==  oMenu  ||  undefined  ==  oMenu) {
                        createHtml();
                    }  else  {
                        $( ' #pTip ' ).text( ' ×关闭<< ' );
                        oMenu.style.display  =   " block " ;
                        fnLarge();
                    }
                     // $(oMenu).show("slow");
                }  else  {
                    $( ' #pTip ' ).text( ' ＋展开>> ' );
                    fnSmall();
                     // $(oMenu).hide("slow");
                }
            }  catch  (e){ }
        }
         function  fnLarge(){
             try {    
                 if (w  <   780 ){
                    w  +=   50 ;
                    h  +=   30 ;
                    oMenu.style.width  =  w + " px " ;
                    oMenu.style.height  =  h + " px " ;
                    window.setTimeout( " fnLarge() " , 3 );
                }
            }  catch  (e){ }
        }
         function  fnSmall(){
             try {
                 if (w  >   0 ){
                    w  -=   50 ;
                    h  -=   30 ;
                    oMenu.style.width  =  w + " px " ;
                    oMenu.style.height  =  h + " px " ;
                    window.setTimeout( " fnSmall() " , 3 );
                }  else  {
                    oMenu.style.display  =   " none " ;
                }
            }  catch  (e){ }
        }
         function  mouseOverBody() {
             if  ( null   !=  oMenu  &&   " none "   ==  oMenu.style.display  &&  w  >   0 ) {
                emotion();
            }
        }
         function  getIFrame() {  // IE6.0+
             if (parent){
                 var  f  =  parent.document.getElementsByTagName( " IFRAME " );
                 for ( var  i  =   0 ; i  <  f.length; i ++ ) {
                     if (f[i].contentWindow  ==  self) {
                         return  f[i];
                    }
                }
            }
        } 
         //  get absolute TOP position
         function  getAbsoluteLeft(ob){
             if ( ! ob){ return   null ;}
             var  mendingOb  =  ob;
             var  mendingLeft  =  mendingOb.offsetLeft;
             while ( mendingOb  !=   null   &&  mendingOb.offsetParent  !=   null   &&  mendingOb.offsetParent.tagName  !=   " BODY "  ){
                mendingLeft  +=  mendingOb.offsetParent.offsetLeft;
                mendingOb  =  mendingOb.offsetParent;
            }
             return  mendingLeft;
        }
         //  get absolute TOP position
         function  getAbsoluteTop(ob){
             if ( ! ob){ return   null ;}
             var  mendingOb  =  ob;
             var  mendingTop  =  mendingOb.offsetTop;
             while ( mendingOb  !=   null   &&  mendingOb.offsetParent  !=   null   &&  mendingOb.offsetParent.tagName  !=   " BODY "  ){
                mendingTop  +=  mendingOb.offsetParent.offsetTop;
                mendingOb  =  mendingOb.offsetParent;
            }
             return  mendingTop ;
        }
         script >
         < style  type ="text/css" >
        body { margin : 0 ; padding : 0 ; }
        p { cursor :  pointer ;  margin :  0 ;  padding :  0 ;  font-size :  12px ;  display :  inline ; }
         style >
     head >
     < body >
         < div  class ="tit-05" >
             < div  style ="float:left; color:gray;" >>>库存占采购支出比 div >
             < div  style ="float:right; color:gray;"  onclick ="emotion();"  onmouseover ="mouseOverBody()" >< p  id ="pTip" >+展开>> p > div >
         div >
         < div  class ="insL04-ins" >
             < div  id ="chartdiv"  style ="float:left; display:none;" > div >
         div >
         < input  type ="hidden"  id ="data_chartdiv"  value ="<%=xmldata %>"   />
         < div  id ="_div_viewcharts"  style ="position:absolute; border: 2px solid lightblue; filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity: 0.8;opacity: 0.8; background: #fff; margin: 1px auto; overflow: hidden; display: none; padding: 0px;" >
         div >
     body >    
html >