怎么做类似百度空间的相册中的相册列表的动画效果？

Question

百度空间的相册左侧是一列相册列表，显示5个相册，当相册数超过5个时，单击下箭头就可以使相册列表往上滚动一格，即本来显示的是第i到第i+5个相册，单击下箭头之后，就显示第i+1到第i+6个了。并且是动态滚动，我很想知道那个动态滚动效果是怎么做出来的。散分啊，参与有分

Answer 1

<script>
var objmain = G("main");//翻页事件
function bandLink(evt){
var e=window.event||evt;
var o=e.srcElement||e.target;
var l=o.href; var aArr=l.split("#/");
var m=aArr[1]; var newLink="";
var mArr=m.split("/"); mArr[mArr.length-2]="page"; 
newLink=mArr.join("/"); var dataLink="http://hi.baidu.com/"+newLink.replace("#","");
dataLink+="?t="+Math.random();
var myJs=new JsLoader();
myJs.onsuccess=function(){
if(errorNum) {
showErr(errorNum);
G('album_Intro').innerHTML ="";
G('album_Name').innerHTML="";
return;
}
G('album_Intro').innerHTML =albumInfo.albDesc;
G('album_Name').innerHTML  =albumInfo.albName;

G('upPicBnt').onclick =function(){
if(albumInfo.albUseV<albumInfo.albAllV) addPhoto('/woorahm/creat/picture/album/'+albumInfo.albEncName+'/0');
else alertPop('上传新照片','相册空间已满');
return false;
}

imgarr=albPicArr;

//异步数据载入时覆盖原来的值
 chgimgs();

G('page').innerHTML=albumInfo.albPageBar; addPageBarEvent();
}
myJs.load(dataLink);
}function addPageBarEvent(){
var pageBar=G('page');
if(typeof(pageBar)=="undefined" || !pageBar) return;
var pageLinks=pageBar.getElementsByTagName('a');
var pageLinksLen=pageLinks.length;

for(var i=0;i<pageLinksLen;i++)
{
pageLinks[i].onclick=function(event){bandLink(event);}
}
}function updatesize(){ 
var bodyw = window.document.body.offsetWidth;  
if(bodyw <= 790) {objmain.style.width="772px";} 
else if(bodyw >= 1016) objmain.style.width="996px"; else objmain.style.width="100%";if(0){
showErr(0);
G('album_Intro').innerHTML ="";
G('album_Name').innerHTML="";
}else{
if(imgarr.length<=0) 
{
G('forimgs').innerHTML="该相册还没有照片，<a href='#' onclick='if(4.0 < 1000.0) addPhoto(\"/woorahm/creat/picture/album/%C3%A8/0\"); else alertPop(\"上传新照片\",\"相册空间已满\"); return false;'>立即上传。</a><div id='page'></div>";
scroll2photo();
return;
} else { chgimgs(); addPageBarEvent();}
}}
updatesize(); 
window.onresize = updatesize;initAlbList();document.onmouseup=function(){setContinue(0);}</script>
大概既是当点击箭头时，异步加载下一页的数据，然后通过innerHTML来进行替换。
有个方法叫
//异步数据载入时覆盖原来的值
chgimgs();
function chgimgs(){
var mm = G("m_albumlist");
if(mm.offsetWidth>700){
g_cols = 3;
}else{
g_cols = 2;
}
showimgs();
scroll2photo();
}
//这个方法里有个showimgs();方法function showimgs(){
var g_bar="";
try{ g_bar=G("page").innerHTML; }catch(e){}
htm="";
htm += '<table width="100%" border="0" cellspacing="0" cellpadding="0" id="forimgsTable">';
for(i=0,len=imgarr.length; i<=len; i+=g_cols){
if(i>0){htm+='<tr><td colspan="'+g_cols+'"><div class="line">&nbsp;</div></td></tr>';}
htm+="<tr>";
var tr1="";
var tr2="";
var tr3="";
for(j=i ; j<i+g_cols && j<len; j++){
tr1+='<td align="center" valign="bottom"  id="photo_'+j+'" onmouseover="tdMouseOver('+j+')" onmouseout="tdMouseOut('+j+')"  width="25%">';
tr1+='<br style="line-height:10px;"><a href="'+imgarr[j].purl+'" target="_blank"><img src="'+imgarr[j].psrc+'" border="0"></a></td>';
tr2+='<td align="center" valign="top" id="photo_'+j+'_size" onmouseover="tdMouseOver('+j+')" onmouseout="tdMouseOut('+j+')"><div class="tit"><span class="size">'+imgarr[j].psize;
if(imgarr[j].pcmtNum>0) tr2+=' | <span class="cmt"><a href="'+imgarr[j].purl+'#pComment">评论('+imgarr[j].pcmtNum+')</a></span>';
tr2+='</span><br><span class="name">'+insertWbr(imgarr[j].pname,24)+'</span></div></td>';
if(imgarr[j].pedit && imgarr[j].pedit.length>0){
tr3+="<td align='center' id=\"photo_"+j+"_edit\" height=\"25\" onmouseover=\"tdMouseOver("+j+")\" onmouseout=\"tdMouseOut("+j+")\"><div class=\"edit\">"+imgarr[j].pedit;
tr3+="&nbsp;|&nbsp;<a href='#' class='act' onClick='photodel(\"photoform"+j+"\");return false;'>删除</a></div><form style='display:none;' action='/woorahm/commit' name='photoform"+j+"' id='photoform"+j+"' method='post'><input type='hidden' name='bdstoken' value='9d863f6f43a7f54daafcc10754952522'><input type='hidden' name='ct' value='4'><input type='hidden' name='cm' value='3'><input type='hidden' name='spPhotoName' value='"+imgarr[j].pname+"'><input type='hidden' name='spPhotoID' value='"+imgarr[j].pid+"'><input type='hidden' name='spRefURL' value='"+XSSspRefURL +"'></form></td>";
}else{
tr3+="<td align='center' id='photo_"+j+"_edit' onmouseover='tdMouseOver("+j+")' onmouseout='tdMouseOut("+j+")' style='height:5px;'>&nbsp;</td>";
}
}
htm+=tr1+"</tr><tr>"+tr2+"</tr><tr>"+tr3+"</tr>";
}
htm+="</table><br><div id='page'>"+g_bar+"</div>";
G("forimgs").innerHTML=htm;
}G("forimgs").innerHTML=htm;看到最后一句话了吗？就是它innerHTML.

Answer 2

以上是我从我百度空间相册JS里抓下来的~··大家可以去看看百度空间相册的JS文件~··刚抓出来的~··还是热的  呵呵

Answer 3

我做过一个，不过是横向滚动的，单击箭头都横向的滚动。
大体代码如下：
var images=[]; //图片数组
      var m;
      function init()
      {
       var imgarr=document.getElementsByTagName("img");
       for(var i=0;i<imgarr.length;i++)
       {
        if(imgarr[i].className=="img")
        images.push(imgarr[i]);
        addEventListener(imgarr[i],"mouseover",handleevent) //自动为每个元素添加鼠标经过方法
       }
      }
     function addEventListener(ele,type,func)
     {
      if(ele.addEventListener)
      {
        ele.addEventListener(type,func,false);
      }
      else
      {
       ele.attachEvent("on"+type,func);
      }
     } 
     function handleevent(evt)
     {
      var event=window.event?window.event:evt;
      var target=event.target?event.target:event.srcElement;
      for(var i=0;i<images.length;i++)
      {
       if(images[i]==target)
       break;
      }
     setTimeout(function()
      {
      go(i)
      },200);
     }
     function go(i)
     { 
       $("div").style.display="none";
       document.getElementById("showpic").disabled="";
       m=images[i].src;
       document.getElementById("showpic").src=images[i].src;
       document.getElementById("show").style.display="";
       var prev=(i-1+images.length)%images.length;
       var next=(i+1)%images.length;
       document.getElementById("prev").onclick=function()
        {
         setTimeout(function()
         {
          go(prev);
         },200);
        };
      document.getElementById("next").onclick=function()
       {
        setTimeout(function()
        {
         go(next);
        },200);
       };     
     }
     function hide()
     {
      //var imgs=document.getElementById("showpic").src;
      var g=m.lastIndexOf("/");
      var s=m.substring(g+1);
      var d=document.getElementById("div");
      if(!$("button1"))
      { 
        $("div").style.display="";
        var btn1=document.createElement("input");
        btn1.type="button";
        btn1.className="font";
        btn1.value="显示";
        btn1.id="button1";
        d.appendChild(btn1);
      
        btn1.onclick=function()
        {
         setTimeout(function()
          {
           document.getElementById("showpic").style.display="";
           document.getElementById("showpic").src=s;
          },2);
        };
       var btn2=document.createElement("input");
       btn2.type="button";
       btn2.className="font"
       btn2.value="隐藏";
       btn2.id="button2";  
       d.appendChild(btn2);
       btn2.onclick=function()
        {
         setTimeout(function()
         {
          document.getElementById("showpic").style.display="none";
         },2);
        };
      }
      else
      {
        $("div").style.display="";
        $("button1").onclick=function()
        {
         setTimeout(function()
          {
           document.getElementById("showpic").style.display="";
           document.getElementById("showpic").src=s;
          },2);
        };
       $("button2").onclick=function()
        {
         setTimeout(function()
         {
          document.getElementById("showpic").style.display="none";
         },2);
        };
      }
       if(document.getElementById("button1").isTextEdit)
       {
         document.getElementById("showpic").disabled="true";
       }
     }
    function  $(id)
    {
     return document.getElementById(id);
    }
    function resize(size)
     {
         var img=document.getElementById("showpic");
          var style=img.currentStyle;
          var height=parseInt(style.height);
          var width=parseInt(style.wdith);
          img.style["height"]=size+"px";
          img.style["width"]=size+"px";
     }
    </script>其实主要思想就是在点向下的箭头的时候让第一个不可见并且把后面的往前移一个位置，再让后面的补到可见的最后一个位置上，这里做个循环就行啦！