• 2010-10-18

    模仿flash的多图层缩放浮动js特效(兼容ie&ff&op) - [技术空间]

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

    写了一个模仿flash的多图层缩放浮动效果,代码存档。
    <!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>js demo-flash</title>
    <script>
    firstsize=16;
    minsize=12;
    maxsize=40;
    labelwidth=180;
    count=4;
    divw=300;
    divh=600;
    divborder=5;
    step=10;
    speed=10;
    labelmin=(labelwidth*count-divw)/(count-1);
    imageObj = new Image();
    imageObj2 = new Image();
    images = new Array();
    images2 = new Array();
    colorarr=new Array("yellow","lightgreen","orange","purple","lightblue","blue","green","pink");
    txtarr=new Array("潮流酷哥","演武者","旅行家","古代仕女");
    msgarr=new Array("他望着那些房屋、城堡、森林,想着曾经看过这些景物而如今已不存在的无数世代;他明白了,自己所见的一切无非就是遗忘,而绝对的遗忘从他不再存在的那一刻起,终将告成。而我,也再一次想起这个令人惊讶的事实:一切存在的东西也都有可能不存在。","全景展现德川家康夺取天下最重要的一次战役。<br>深度描画战争背后复杂的利益争斗与人心向背。<br>著名历史小说家司马辽太郎最好看的经典杰作。<br>数千万日本战国爱好者望眼欲穿,中文版首次面世。<br>著名作家田中芳树倾力推荐的政商两界生存必读书。","各位知道吗?这次一个人去旅行的我,北至北海道,南至冲绳石垣岛,上山下海,各式各样的交通工具都努力尝试,不只惊险还充满刺激,每一段行程都发生了许多意想不到的插曲……<br>偶尔心里也会浮起这样的念头:“其他人一个人旅行时都是怎么做?","有狐绥绥,在彼淇梁。<br>心之忧矣,之子无裳。<br>有狐绥绥,在彼淇厉。<br>心之忧矣,之子无带。<br>有狐绥绥,在彼淇侧。<br>心之忧矣,之子无服。");
    mydo=null;
    var Browser = {
    'isIE' : (navigator.userAgent.indexOf('MSIE') >= 0) && (navigator.userAgent.indexOf('Opera') < 0),
    'isFirefox' : navigator.userAgent.indexOf('Firefox') >= 0,
    'isOpera' : navigator.userAgent.indexOf('Opera') >= 0
    };
    function myleft(i)
    {
    again=false;
    w=0;
    for(j=0;j<count;j++)
    {
     if(i!=j)
     {
      if(document.getElementByIdx_x("div"+j).clientWidth>labelmin)
      {
      again=true;
      oldw=document.getElementByIdx_x("div"+j).clientWidth;
      document.getElementByIdx_x("div"+j).childNodes[0].style.width=document.getElementByIdx_x("div"+j).style.width=document.getElementByIdx_x("div"+j).clientWidth-step+"px";
      document.getElementByIdx_x("div"+j).childNodes[1].style.top=(-1)*document.getElementByIdx_x("div"+j).childNodes[0].clientHeight+document.getElementByIdx_x("div"+j).childNodes[0].clientHeight*0.25+"px";
      document.getElementByIdx_x("div"+j).childNodes[1].style.left=document.getElementByIdx_x("div"+j).childNodes[0].clientWidth*0.2+"px";
      if( document.getElementByIdx_x("div"+j).childNodes[1].style.fontSize.split("px")[0]>minsize)
      document.getElementByIdx_x("div"+j).childNodes[1].style.fontSize=parseInt(document.getElementByIdx_x("div"+j).childNodes[1].style.fontSize.split("px")[0])-1+"px";
      }
      w+=document.getElementByIdx_x("div"+j).clientWidth;
     }
     if(divh-document.getElementByIdx_x("div"+j).childNodes[0].clientHeight-60>=0)
     document.getElementByIdx_x("txt"+j).style.height=(divh-document.getElementByIdx_x("div"+j).childNodes[0].clientHeight-60)+"px";
    }
    document.getElementByIdx_x("div"+i).childNodes[0].style.width=document.getElementByIdx_x("div"+i).style.width=labelwidth*count-w+"px";
    document.getElementByIdx_x("div"+i).childNodes[1].style.top=(-1)*document.getElementByIdx_x("div"+i).childNodes[0].clientHeight+document.getElementByIdx_x("div"+i).childNodes[0].clientHeight*0.25+"px";
    document.getElementByIdx_x("div"+i).childNodes[1].style.left=document.getElementByIdx_x("div"+i).childNodes[0].clientWidth*0.2+"px";
    if( document.getElementByIdx_x("div"+i).childNodes[1].style.fontSize.split("px")[0]<maxsize-1)
    document.getElementByIdx_x("div"+i).childNodes[1].style.fontSize=parseInt(document.getElementByIdx_x("div"+i).childNodes[1].style.fontSize.split("px")[0])+2+"px";
    if(!again)
    {
     clearInterval(mydo);
     for(j=0;j<count;j++)
     {
      if(i!=j)
       document.getElementByIdx_x("div"+j).childNodes[1].style.fontSize=minsize+"px";
      else
       document.getElementByIdx_x("div"+j).childNodes[1].style.fontSize=maxsize+"px";
     }
    }
    }
    function myright(i)
    {
    again=false;
    w=0;
    for(j=0;j<count;j++)
    {
     if(i!=j)
     {
      if(document.getElementByIdx_x("div"+j).clientWidth<labelwidth)
      {
      again=true;
      document.getElementByIdx_x("div"+j).childNodes[0].style.width=document.getElementByIdx_x("div"+j).style.width=document.getElementByIdx_x("div"+j).clientWidth+step+"px";
      document.getElementByIdx_x("div"+j).childNodes[1].style.top=(-1)*document.getElementByIdx_x("div"+j).childNodes[0].clientHeight+document.getElementByIdx_x("div"+j).childNodes[0].clientHeight*0.25+"px";
      document.getElementByIdx_x("div"+j).childNodes[1].style.left=document.getElementByIdx_x("div"+j).childNodes[0].clientWidth*0.2+"px";
      if( document.getElementByIdx_x("div"+j).childNodes[1].style.fontSize.split("px")[0]<maxsize-1)
      document.getElementByIdx_x("div"+j).childNodes[1].style.fontSize=parseInt(document.getElementByIdx_x("div"+j).childNodes[1].style.fontSize.split("px")[0])+2+"px";
      }
      w+=document.getElementByIdx_x("div"+j).clientWidth;
     }
    if(divh-document.getElementByIdx_x("div"+j).childNodes[0].clientHeight-60>=0)
    document.getElementByIdx_x("txt"+j).style.height=(divh-document.getElementByIdx_x("div"+j).childNodes[0].clientHeight-60)+"px";
    }
    document.getElementByIdx_x("div"+i).childNodes[0].style.width=document.getElementByIdx_x("div"+i).style.width=labelwidth*count-w+"px";
    document.getElementByIdx_x("div"+i).childNodes[1].style.top=(-1)*document.getElementByIdx_x("div"+i).childNodes[0].clientHeight+document.getElementByIdx_x("div"+i).childNodes[0].clientHeight*0.25+"px";
    document.getElementByIdx_x("div"+i).childNodes[1].style.left=document.getElementByIdx_x("div"+i).childNodes[0].clientWidth*0.2+"px";
    if( document.getElementByIdx_x("div"+i).childNodes[1].style.fontSize.split("px")[0]>minsize)
    document.getElementByIdx_x("div"+i).childNodes[1].style.fontSize=parseInt(document.getElementByIdx_x("div"+i).childNodes[1].style.fontSize.split("px")[0])-1+"px";
    if(!again)
    {
     clearInterval(mydo);
     for(j=0;j<count;j++)
     document.getElementByIdx_x("div"+j).childNodes[1].style.fontSize=firstsize+"px";
    }
    }
    function myover(e)
    {
    currentobj=(!e)?event.srcElement:e.target;
    if(currentobj.id.split("imgfloat").length==2)
    currentid=currentobj.id.split("imgfloat")[1];
    else if(currentobj.id.split("img").length==2)
    currentid=currentobj.id.split("img")[1];
    else
    currentid=currentobj.id.split("div")[1];
    if(!currentid)return;
    clearInterval(mydo);
    mydo=setInterval("myleft("+currentid+")",speed);
    }
    function mymove(e)
    {
    if(!e)e=event;
    if(e.clientX>=l&&e.clientX<=(l+(labelwidth+divborder*2)*count)&&e.clientY>=t&&e.clientY<=(t+divh))return;
    clearInterval(mydo);
    bigdiv=0;max=0;
    for(i=0;i<count;i++)
    if(document.getElementByIdx_x("div"+i).clientWidth>max)
    {
    max=document.getElementByIdx_x("div"+i).clientWidth;
    bigdiv=i;
    }
    mydo=setInterval("myright("+bigdiv+")",speed);
    }
    function myload()
    {
    for(j=0;j<count;j++)
    {
     document.getElementByIdx_x("div"+j).childNodes[1].style.top=(-1)*document.getElementByIdx_x("div"+j).childNodes[0].clientHeight+document.getElementByIdx_x("div"+j).childNodes[0].clientHeight*0.25+"px";
     document.getElementByIdx_x("div"+j).childNodes[1].style.left=document.getElementByIdx_x("div"+j).childNodes[0].clientWidth*0.2+"px";
    }
    }
    document.onmousemove=mymove;
    window.onload=myload;
    </script>
    </head>
    <body>
    <div id=maindiv style="margin-left:auto; margin-right:auto;width:900px">
    <script>
    for(i=0;i<count;i++)
    {
    images[i]=""+(parseInt(i)+1)+".jpg";
    imageObj.src=images[i];
    images2[i]=""+(parseInt(i)+1)+".gif";
    imageObj2.src=images2[i];
    if(Browser.isIE)
    stylestr=";overflow:hidden";
    else
    stylestr="";
    document.write('<div style="width:'+labelwidth+'px;height:'+divh+'px;float:left;border:'+divborder+'px solid gray;vertical-align:middle'+stylestr+'" id="div'+i+'"><img style="width:'+labelwidth+'px" src="'+images[i]+'" id="img'+i+'" /><div style="position:relative;left:30px;color:'+colorarr[i]+';font-size:'+firstsize+'px">'+txtarr[i]+'</div><img style="position:relative;left:120px;top:-300px;width:90px;height:185px" src="'+images2[i]+'" id="imgfloat'+i+'" /><div style="position:relative;top:-200px;overflow:hidden;" id="txt'+i+'">'+msgarr[i]+'</div></div>');
    document.getElementByIdx_x("txt"+i).style.height=(divh-labelwidth*2)+"px";
    document.getElementByIdx_x("img"+i).onmouseover=myover;
    document.getElementByIdx_x("div"+i).onmouseover=myover;
    }
    offset=0;
    if(Browser.isIE)
    offset=10;
    l=document.getElementByIdx_x("maindiv").offsetLeft+offset;
    t=document.getElementByIdx_x("maindiv").offsetTop+offset*2;
    </script>
    </div>
    </body>
    </html>

    分享到: