一个js弹出层问题，不使用插件。。

比如有A点坐标（10，10），点击从这个点弹出一个屏幕中心点div，大小100*100，状态是宽度、高度都是从0~100变化，再点击关闭，从屏幕中心点回到（10，10），状态为100~0，难不难？？？

解决方案 »

  1.   

    先设置好预定DIV的TOP 和LEFT （10，10）有两种解决方法  一种是 用JS定时器 每隔一段时间间隔 DIV的Width+1或-1 （+-几都无所谓 值小看起来效果平滑些）还有一种是比较不推荐的FOR循环 原理一样 但是这个效果肯定不如定时器的效果好 今天没太多时间 要不然给你敲一个出来了 呵呵 LZ自己研究研究吧 不难
      

  2.   

    仅分析原理
    其实JS动画一般就是考虑起点状态和终点状态 所需要进行动画的元素的各个属性值的变化。
    按你的要求 其实有两种状态变化需要实现 一个是方框由 w:0 h:0 到w:100 h:100的一个变换 另一个是方框的中心点 从你描述的点A(Xa,Ya)到屏幕中央的坐标位置C(Xc,Yc)的变换。
    所以按上所述 其实方法就很显然了 具体代码我就不给出了 用JS的setInterval 每间隔一定时间调用变换函数 直到判断达到终点的状态后用clearInterval来清除动画事件 对JS写没自信的 可以用jQuery框架 其中有个animate函数就可以用来实现动画 会比较方便。
      

  3.   

    <HTML>
     <HEAD>
    <script>
    var awidth=0;
    var aheight;
    function a(){
    document.getElementById("aa").style.display='block';
    if(parseInt(awidth)<100){
    awidth=document.getElementById("aa").style.width.substring(0,document.getElementById("aa").style.width.length-2);
    aheight=document.getElementById("aa").style.height.substring(0,document.getElementById("aa").style.height.length-2);awidth=parseInt(awidth)+5;
    aheight=parseInt(aheight)+5;document.getElementById("aa").style.width=awidth;
    document.getElementById("aa").style.height=aheight;t=setTimeout(a,1);
    }
    }
    function b(){if(parseInt(awidth)>0){
    awidth=document.getElementById("aa").style.width.substring(0,document.getElementById("aa").style.width.length-2);
    aheight=document.getElementById("aa").style.height.substring(0,document.getElementById("aa").style.height.length-2);awidth=parseInt(awidth)-5;
    aheight=parseInt(aheight)-5;
    if(awidth>0){
    document.getElementById("aa").style.width=awidth;document.getElementById("aa").style.height=aheight;
    }
    if(awidth<1){document.getElementById("aa").style.display='none';}
    t=setTimeout(b,1);
    }
    }
    </script>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></HEAD> <BODY onLoad="a();"><div id="aa" style="position:absolute;top:10; left:10; background-color:#990000; width:0; height:0px; display:none"  onClick="b()"></div> </BODY></HTML>
    忙里偷闲  忙一会写一会 代码很乱 反正效果有了 哈哈