• 2010-11-22

    flash大事记透视动态效果js版(兼容ie&ff&op) - [技术空间]

    版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明
    http://www.blogbus.com/lily64-logs/85065788.html

    flash大事记透视动态效果js版,代码存档。
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>flash</title>
    <script>
    imageObj = new Image();
    imageObj2 = new Image();
    imagesleft = new Array();
    imagesright = new Array();
    count=8;
    for(i=0;i<count;i++)
    {
    imagesleft[i]="h"+(parseInt(i)+1)+".jpg";
    imageObj.src=imagesleft[i];
    imagesright[i]=""+(parseInt(i)+1)+".jpg";
    imageObj2.src=imagesright[i];
    }
    csize=new Array(0,0,0,0,0,0,0,0);
    x=2;
    step=new Array(x,x,x,x,x,x,x,x);
    yeararr=new Array(1989,1994,1998,2000,2004,2008,2010,2012);
    bigsize=600;
    margindiv=180;
    rate=0.67;
    rate2=1;
    stopbig=60;
    goback=false;//是否返回
    isturn=false;//是否循环
    function myreset(j)
    {
    if(isturn)
    {
    step[j]=x;
    csize[j]=0;
    if(j==count-1)
    {
    for(i=0;i<count;i++)
    {
    if(csize[i]>=0)
    setTimeout("myshow("+i+")",2000*i);
    }
    }
    }
    }
    function myshow(j)
    {
    try
    {
    if((step[j]>0)&&(centerl-(csize[j]+step[j])*2<stopbig))
    {
    step[j]*=-1;
    oldsize=csize[j];
    }
    csize[j]+=step[j];
    csize[j]*=(1+step[j]*4/1000);
    if(step[j]<0&&!goback)
    {
    document.getElementById("divleft"+j).style.border="0";
    document.getElementById("divright"+j).style.border="0";
    document.getElementById("imgleft"+j).style.left=csize[j]-oldsize+"px";
    document.getElementById("imgright"+j).style.display="none";
    document.getElementById("bothdiv"+j).style.display="none";
    }
    else
    {
    document.getElementById("imgright"+j).style.display="block";
    document.getElementById("bothdiv"+j).style.display="block";
    document.getElementById("divleft"+j).style.top=centert-csize[j]*rate+"px";
    document.getElementById("divleft"+j).style.left=centerl-csize[j]*2+"px";
    document.getElementById("divleft"+j).style.height=csize[j]*rate+"px";
    document.getElementById("divleft"+j).style.width=csize[j]+"px";
    document.getElementById("divright"+j).style.top=centert-csize[j]*rate2+"px";
    document.getElementById("divright"+j).style.left=centerl+csize[j]/2*rate2+"px";
    document.getElementById("divright"+j).style.height=csize[j]*rate2+"px";
    document.getElementById("divright"+j).style.width=csize[j]+"px";
    document.getElementById("bothdiv"+j).style.left=centerl-csize[j]*2+"px";
    document.getElementById("yeardiv"+j).style.width=csize[j]/5*2+"px";
    document.getElementById("yeardiv"+j).style.height=csize[j]/5+"px";
    document.getElementById("yeardiv"+j).style.fontSize=csize[j]/5+"px";
    document.getElementById("yearflipdiv"+j).style.width=csize[j]/5*2+"px";
    document.getElementById("yearflipdiv"+j).style.height=csize[j]/5+"px";
    document.getElementById("yearflipdiv"+j).style.fontSize=csize[j]/5+"px";
    document.getElementById("yearflipdiv"+j).style.marginTop=-1*csize[j]/5/5+"px";
    if(csize[j]>10)
    {
    document.getElementById("divleft"+j).style.border="1px solid #bbb";
    document.getElementById("divleft"+j).style.padding="1px";
    document.getElementById("divright"+j).style.border="1px solid orange";
    document.getElementById("divright"+j).style.padding="1px";
    }
    else
    {
    document.getElementById("divleft"+j).style.border="0";
    document.getElementById("divright"+j).style.border="0";
    document.getElementById("imgleft"+j).style.left=0;
    document.getElementById("imgright"+j).style.left=0;
    }
    }
    if(csize[j]>=0)
    setTimeout("myshow("+j+")",10);
    else
    myreset(j);
    }catch(e){myreset(j);}
    }
    function picdiv(divname)
    {
    mydiv=document.createElement("div");
    mydiv.style.position="absolute";
    mydiv.style.width=0;
    mydiv.style.height=0;
    mydiv.style.overflow="hidden";
    mydiv.style.left=centerl+"px";
    mydiv.style.top=centert+"px";
    mydiv.id="div"+divname+i;
    myimg=document.createElement("img");
    myimg.style.position="relative";
    myimg.style.width="100%";
    myimg.style.height="100%";
    myimg.id="img"+divname+i;
    myimg.src=eval("images"+divname)[i];
    mydiv.appendChild(myimg);
    document.getElementById("maindiv").appendChild(mydiv);
    }
    function mymake()
    {
    for(i=0;i<count;i++)
    {
    picdiv("left");
    picdiv("right");
    document.getElementById("maindiv").innerHTML+='<div id="bothdiv'+i+'" style="position:absolute;top:'+(centert)+'px;left:'+centerl+'px;"><div style="width:0;font-size:0;height:0;overflow:hidden;" id="yeardiv'+i+'">'+yeararr[i]+'</div><div style="width:0;font-size:0;height:0;filter:flipv; -moz-transform: matrix(1, 0, 0, -1, 0, 0); -webkit-transform: matrix(1, 0, 0, -1, 0, 0);-o-transform: matrix(1, 0, 0, -1, 0, 0);color:#ccc;overflow:hidden;" id="yearflipdiv'+i+'">'+yeararr[i]+'</div></div>';
    }
    for(i=0;i<count;i++)
    {
    if(csize[i]>=0)
    setTimeout("myshow("+i+")",2000*i);
    }
    }
    function myload()
    {
    pageobj=document.documentElement;
    w=pageobj.clientWidth;
    h=pageobj.clientHeight;
    centert=h/2+50;
    centerl=w/2+110;
    document.getElementById("maindiv").innerHTML+='<div style="width:'+margindiv+'px;height:'+h+'px;position:absolute;background:#E3E3E3;z-index:10000"></div>';
    document.getElementById("maindiv").innerHTML+='<div style="width:'+margindiv+'px;height:'+h+'px;position:absolute;background:#E3E3E3;z-index:10000;left:'+(w-margindiv)+'px"></div>';
    setTimeout("mymake()",2000);
    }
    window.onload=myload;
    </script>
    </head>
    <body style="padding:0;margin:0; background-repeat:no-repeat; background-position:center top; background-image:url(bg.gif);">
    <div id=maindiv></div>
    </body>
    </html>

    分享到: