防baidu的图片滚动效果

贴部分代码,
  function album_tracker(aLink) {
    var img = new Image();
	img.src = "http://hi.baidu.com/sys/statlog/1.gif?m=albumtracker&v=" + encodeURIComponent(aLink.firstChild.src) + "&t="+ Math.random();
}
function G(obj)
{
	return typeof(obj)=='object'?obj:document.getElementById(obj);
}
Array.prototype.addBefore=function(arr)
{
	if(this==[]) return arr;
	else return arr.concat(this);
}
Array.prototype.addAfter=function(arr)
{
	if(this==[]) return arr;
	else return this.concat(arr);
}
Array.prototype.indexOf=function(substr,start){
	var ta,rt,d='\0';
	if(start!=null){ta=this.slice(start);rt=start;}else{ta=this;rt=0;}
	var str=d+ta.join(d)+d,t=str.indexOf(d+substr+d);
	if(t==-1)return -1;rt+=str.slice(0,t).replace(/[^\0]/g,'').length;
	return rt;
}

//function pageLoad(spaceURL){
//	var imgID=window.location.hash;
//	if(imgID.replace(/#/g,"").length>1){
//		if(imgID.indexOf("#IMG=")>-1){
//			imgID=imgID.replace('#IMG=','');
//			var baseURL='http://hi.baidu.com'+spaceURL+'/album/item/'+imgID+'.html';
//			window.location=baseURL;
//		}
//	}
//}

function autoSize(obj,isAlb)
{
	MAX_WIDTH=95;
	MAX_HEIGHT=95;
	IMG_MARGIN=7;
	
	var tImg=new Image();
	tImg.onload=function(){
		var w=this.width;
		var h=this.height;
		if(w<MAX_WIDTH && h<MAX_HEIGHT){
				obj.width=w;
                obj.height=h;
				obj.style.marginLeft=IMG_MARGIN+(MAX_WIDTH-w)/2+'px';
				obj.style.marginTop=IMG_MARGIN+(MAX_HEIGHT-h)/2+'px';
				//obj.hspace=(MAX_WIDTH-w)/2; obj.vspace=(MAX_HEIGHT-h)/2;
				return;
			}
			if(w>h) {
				obj.width=MAX_WIDTH;obj.height=MAX_WIDTH*h/w; 
			}
			else{
				obj.height=MAX_HEIGHT;obj.width=MAX_HEIGHT*w/h;   
				//obj.width+=2; 
			}
	    if(isAlb){
            if(document.all){
				obj.style.marginLeft=IMG_MARGIN+(MAX_WIDTH-obj.width)/2+6+'px';
				obj.width=obj.width-4;
            }
            else obj.style.marginLeft=IMG_MARGIN+(MAX_WIDTH-obj.width)/2+3+'px';
        }
        else   obj.style.marginLeft=IMG_MARGIN+(MAX_WIDTH-obj.width)/2+'px';
		obj.style.marginTop=IMG_MARGIN+(MAX_HEIGHT-obj.height)/2+'px';
		//obj.hspace=(MAX_WIDTH-obj.width)/2; obj.vspace=(MAX_HEIGHT-obj.height)/2;
	}
	tImg.src=obj.src;
}

function autoSizeBig(objW,objH)
{
	
	MAX_WIDTH=560;
	MAX_HEIGHT=420;
	var W=objW;
	var H=objH;
	if(W<MAX_WIDTH && H<MAX_HEIGHT){
		return {w:W,h:H};
	}
	if(W/H>MAX_WIDTH/MAX_HEIGHT)
	{
		return {w:MAX_WIDTH,h:MAX_WIDTH*H/W}
	}else{
		return {w:MAX_HEIGHT*W/H,h:MAX_HEIGHT} 
	}
}

ScrollImg=function(coverObj,imgNodeBox,bigImgObj){
//spaceUrl,spaceName已经去掉了
	_me=this;
	this.imgNodeBox=G(imgNodeBox);
	this.bigImgObj=G(bigImgObj);
	//this.spUrl=spaceUrl;
	this.isContinue=false;  
	this.imgIDList=[];
	this.obj=G(coverObj);
	this.oneStep=95+7+12+1+2;	//
	this.allSkip=0;				//
	this.goNum=1;				//  
	this.skip=9;				//  
	this.skipTime=25;			//
	this.skipSum=0;    //
	this.direction=1;  //
	this.selNode=null;   //
	this.getNode=null; //
	this.addLen=0;
	this.bnt1=null;
	this.bnt2=null;
	this.disBnt=0;
	this.lastIsEnd=0;			//
	this.lastIsAlbum=0;			//
	//this.spName=spaceName;
	this.nowPicSn=0;
	this.allPicNum=0;
	this.isGoing=false;     //
	this.nowBigPic=null;
	
	var isLoading=false;
	
	this.clear=function(){
		this.skipSum=0;
		this.allSkip=0;
		this.goNum=1;
		this.isGoing=false;
	}
	//
	this.scroll=function(){
		if(_me.checkStat()) {  
			if(this.imgIDList[0].picSn<=1 && this.direction==-1){ //
				this.clear(); 
				this.disableBnt(-1); 
				return false;
			}
			if((this.lastIsEnd || this.lastIsAlbum) && this.direction==1){  
				this.clear();this.disableBnt(1);  
				return false;
			}
//			if(isLoading) return;
//			isLoading=true;
//			_me.loadImg();
//			return false;
		}
		if(this.disBnt) this.enableBnt(this.disBnt);
		_me.allSkip=_me.oneStep*_me.goNum;
		if(_me.skipSum<_me.allSkip){
			var nowLeft=parseInt(_me.obj.style.left);
			_me.obj.style.left=(nowLeft-_me.skip*_me.direction)+'px';
			_me.skipSum+=_me.skip;
			setTimeout('_me.scroll()',_me.skipTime);
		}else{
			_me.clear();
			_me.scrollEnd();
		}
	}
	this.scrollEnd=function(){}
	this.setCnt=function(arg){
		this.isContinue=arg;
	}
	
	this.go=function(dirc){  //
		this.isGoing=true;
		this.goNum=1;
		this.direction=dirc;
		this.scroll();
		this.canGoon(this.goNum*this.oneStep/this.skip*this.skipTime); //this.goNum*this.oneStep/this.skip*this.skipTime 
		this.scrollEnd=function()
		{
			if(this.isContinue) this.scroll();
		}
	}
	
	this.sel=function(obj){
		var node=obj;
		this.selScroll(node);
	}
	this.goAsel=function(direc){
		var imgs=this.obj.getElementsByTagName('img');
		var iLen=imgs.length;
		var node=null;
		for(var i=0;i<iLen;i++)
		{
			if(this.selNode==imgs[i])
			{
				if(direc==-1)if(i-1>=0) node=imgs[i-1]; else node=imgs[0];
				else if(direc==1) if(i+1<=iLen-1) node=imgs[i+1]; else node=imgs[iLen-1];
				break;
			}
		}
		this.selScroll(node);
	}
	this.selScroll=function(selNode)
	{
		var node=selNode;
		var imgs=this.obj.getElementsByTagName('img');
		var iLen=imgs.length;
		var nodeNum=-1;
		//alert(nodeNum+":"+imgIDList.length);
		for(var i=0;i<iLen;i++)
		{
			if(imgs[i]==node) {nodeNum=i; imgs[i].parentNode.className='selImg';}
			else if(imgs[i].parentNode.className!='albumImg') imgs[i].parentNode.className='spanImg';
		}		

        if(nodeNum==this.imgIDList.length-1 && this.lastIsAlbum){_me.gotoUrl(nodeNum); return;}
		if(this.selNode==node) return;  
		this.selNode=node;

        var offsetStep=nodeNum-parseInt(Math.abs(parseInt(this.obj.style.left))/this.oneStep)-2;
		this.goNum=Math.abs(offsetStep);
		this.direction=offsetStep/this.goNum;
		
        this.scroll();
		this.canGoon(this.goNum*this.oneStep/this.skip*this.skipTime);
			
		var isrc='/albums/Thumb/'+_me.selNode.id+'.jpg';
		//var isrc = _me.selNode.id+'.jpg';
		var ibigSrc='/albums/Source/'+_me.selNode.id+'.jpeg'; //原始图
//         var ibigSrc=_me.selNode.id+'.jpeg';
 //var ibigSrc=_me.selNode.id+'.jpg';
		//var ibigSrc='http://www.kkwebs.com';
		var iPreSrc=_me.selNode.id+'.jpg';
		var imgObj=autoSizeBig(this.imgIDList[nodeNum].imgW, this.imgIDList[nodeNum].imgH);
		
		var _iDiv = G("__imgDiv__");
		if(!_iDiv) _iDiv=document.createElement('DIV');
		_iDiv.id="__imgDiv__";
		_iDiv.style.display = 'none';
		document.body.appendChild(_iDiv);
		if(!G("imgDiv_"+_me.selNode.id))
		{
			var i="<a href='"+ibigSrc+"' target='_blank' title='点击可查看原图' onclick='album_tracker(this)'><img id='showBigImg' width='"+imgObj.w+"'  height='"+imgObj.h+"' style='width:"+imgObj.w+"px; height:"+imgObj.h+"px;' border=0 src='"+isrc+"'></a>";
			_me.bigImgObj.innerHTML	=i;

        	setTimeout(function(){
        		var _div = G("__img__");
        		if(!_div){
           			var _div = document.createElement('DIV');
            		_div.id = "__img__";
            		_div.style.display = 'none';
            		document.body.appendChild(_div);
        		}
				_iDiv.innerHTML+='<div id="imgDiv_'+_me.selNode.id+'"></div>';  
       			_div.innerHTML = '<img src="' + iPreSrc + '" onload="setTimeout(function(){ _me.gotoUrl(\'' + nodeNum + '\');}, 10)">';
        	}, this.skipTime-6);
		
		}
		else
		{
			var i="<a href='"+ibigSrc+"' target='_blank' title='点击可查看原图' onclick='album_tracker(this)'><img id='showBigImg' width='"+imgObj.w+"'; height='"+imgObj.h+"' style='width:"+imgObj.w+"px; height:"+imgObj.h+"px;' border=0 src='"+iPreSrc+"'></a>";
			_me.bigImgObj.innerHTML	=i;
			_me.gotoUrl(nodeNum);
		}
	//	alert(this.imgIDList.length);
		this.showInfo(nodeNum,this.imgIDList.length);
	}

	
	this.checkStat=function(){
		var objLeft=parseInt(this.obj.style.left);  
		var minLeft=this.minLeft();
		var imgs=this.obj.getElementsByTagName('img');
		if(this.direction==-1 && objLeft+1>0) {this.getNode=imgs[0]; return true;}
		if(this.direction==1 && objLeft-1<minLeft) {this.getNode=imgs[imgs.length-1]; return true;}	
		return false;
	}
	this.minLeft=function(){
		return this.oneStep*(this.obj.getElementsByTagName('img').length-5)*(-1);
	}
	
	
	this.loadImg=function(){
		
		var baseUrl='../PhotoComment.ashx?FileName='+this.getNode.id+'&t='+Math.random()+'';
		
		
		var jsUrl="";
		if(this.direction==-1) jsUrl=baseUrl+'pre?t='+Math.random();
		if(this.direction==1) jsUrl=baseUrl+'next?t='+Math.random();
		
		var myJsld=new JsLoader();
		myJsld.onsuccess=function(){
				if(picListErrorNum) {showError(picListErrorNum); G('albSpan').innerHTML=""; return;};
				if(isNext)
				{
					_me.lastIsEnd=lastIsEnd;
					_me.lastIsAlbum=lastIsAlbum;
				}
				var imglist=loadImgList; 
				_me.addData(imglist);
			}
		myJsld.load(jsUrl);
	}
	
	this.addData=function(imgList){
		this.addLen=imgList.length;
		if(this.direction==1) this.imgIDList=this.imgIDList.addAfter(imgList);
		else this.imgIDList=this.imgIDList.addBefore(imgList);	
		this.initNode(this.selNode.id);
	}
	this.initNode=function(selImgID){
		while(this.imgNodeBox.firstChild)
			this.imgNodeBox.removeChild(this.imgNodeBox.firstChild);

		var iLen=this.imgIDList.length;
		for(var i=0;i<iLen;i++){
			var nNode=this.imgIDList[i];
			var tempNode=null;
			if(i==iLen-1)tempNode=this.createNode(nNode.imgID,this.lastIsAlbum);
			else tempNode=this.createNode(nNode.imgID,0);			
			this.imgNodeBox.appendChild(tempNode);
		}
		this.init(selImgID||this.selNode.id);
		this.addLen=0;
	}
	this.init=function(imgID){
		var imgid=imgID||this.selNode.id;
		var imgs=this.obj.getElementsByTagName('img');
		var iLen=imgs.length;
		for(var i=0;i<iLen;i++)
		{
			if(imgs[i].id==imgid) {
				imgs[i].parentNode.className='selImg'; this.selNode=imgs[i];
				if(!isLoading) 
				{
					if(i>2 && iLen-i>2)  this.obj.style.left=(-1)*(i-2)*this.oneStep+'px';
					if(i<=2) this.obj.style.left="0px";
					else if(iLen-i<=2 && iLen-5>0) this.obj.style.left=(-1)*this.oneStep*(iLen-5)+'px';
				}
				var objLeft=parseInt(this.obj.style.left);	
				var minLeft=this.minLeft();		
				if(objLeft+1>0 && this.imgIDList[0].picSn==1){ this.disableBnt(-1);}
				else if(objLeft-1<minLeft && (this.lastIsEnd ||this.lastIsAlbum)){this.disableBnt(1);}
			}
			else if(imgs[i].parentNode.className!='albumImg') imgs[i].parentNode.className='spanImg';
			imgs[i].onclick=function(evt){ if(_me.isGoing) return; else _me.sel(this);}
			imgs[i].parentNode.onclick=function(){if(_me.isGoing) return; else _me.sel(this.getElementsByTagName('img')[0]);}
		}
		
		if(this.addLen) if(this.direction==-1) this.obj.style.left=(-1)*this.addLen*this.oneStep+'px';
		else if(this.direction==1) this.obj.style.left=(-1)*(this.imgIDList.length-this.addLen-5)*this.oneStep+'px';
		
		if(isLoading) { isLoading=false; this.scroll();}
	}
	this.createNode=function(imgID,isAlbum){
		var rNode=document.createElement('td');
		rNode.width='114';
		rNode.height='114';
		var nImgsrc=imgID+'.jpg';
		var nImg='';
		//var albumURL='http://www.kkwebs.com/';
		//var albumURL='http://hi.baidu.com'+this.spUrl+'/album/item/'+imgID+'.html';
		if(isAlbum) {nImg="<DIV class='albumImg'><div class='nextAlbum'><br><br><br>下个相册</div><IMG id='"+imgID+"'  width='95' height='95' src="+nImgsrc+" onload='autoSize(this,1)'></DIV>";}
		else {nImg="<DIV class='spanImg'><IMG id='"+imgID+"' width='95' height='95' src="+nImgsrc+" onload='autoSize(this)'></DIV>";}
		
		rNode.innerHTML=nImg;		
		return rNode;
	}
	this.gotoUrl=function(nodenum){
		if(nodenum==this.imgIDList.length-1 && this.lastIsAlbum)
		{
			//window.location='http://hi.baidu.com'+this.spUrl+'/album/item/'+this.imgIDList[nodenum].imgID+'.html';
			var NextAlumsId=G('NextAlums').value;
			alert("跳转到另一个相册了");
			window.location='?id='+NextAlumsId+'';  //跳转到下一相册第一张图片
		}
		else
		{
			window.location.hash='IMG='+this.imgIDList[nodenum].imgID;
			var isrc=_me.selNode.id+'.jpg';
			try{G('showBigImg').src=isrc;} catch(e){}
			//this.getImg();
		}	
	}
	/*
	this.getImg=function(){
		//this.bigImgObj.innerHTML='鏁版嵁鍔犺浇涓?..';
		var bigPic=new Image().src='http://hiphotos.baidu.com'+_me.spUrl+'/pic/item/'+_me.selNode.id+'.jpg';
		this.showInfo();
	}
	*/
	
	this.showInfo=function(nodeNum,Piclength){
		alert(nodeNum+":"+Piclength);
		this.nowPicSn = (nodeNum+1);
		alert(this.nowPicSn);
		//alert("showinfo");
		//alert(newPhoto.imgSN+":"+newPhoto.imgAllNum);
		G('staSpan').innerHTML="<strong>"+(nodeNum+1)+"</strong>/"+(Piclength-1);
		//		_me.nowPicSn=newPhoto.imgSN;
		//		_me.allPicNum=newPhoto.imgAllNum;
		/*
		var baseUrl='../PhotoComment.ashx?FileName='+this.selNode.id+'&t='+Math.random()+'';
		//var baseURL='http://hi.baidu.com'+this.spUrl+'/album/item/'+this.selNode.id+'.html/info?t='+Math.random();
		
		var myJs=new JsLoader();
		myJs.onsuccess=function(){ //
			//if(picErrorNum){showError(picErrorNum); return;} 
		    var imgObj=autoSizeBig(newPhoto.imgW,newPhoto.imgH);
			var isrc='http://hiphotos.baidu.com'+_me.spUrl+'/pic/item/'+_me.selNode.id+'.jpg';
			var errImgSrc="http://img.baidu.com/hi/img/newalbum/errorImg.jpg";
			if(picErrorNum)
			{
				var i="<img width='200' height='70' style='width:200px; height:70px;' border=0 src='"+errImgSrc+"'>";
				_me.bigImgObj.innerHTML	=i;	
			}
			else
			{
				//do nothing
			}
			
				
			
			if(picErrorNum)
			{
				G('picDescSpan').innerHTML	="";
				G('picSizeSpan').innerHTML	="";
				G('picTimeSpan').innerHTML	="";
			}
			else
			{
				G('picDescSpan').innerHTML	=insertWbr(newPhoto.imgName);
				G('picSizeSpan').innerHTML	=newPhoto.imgSize;
				G('picTimeSpan').innerHTML	=newPhoto.imCrtTime;
				G('picName').innerHTML=insertWbr(newPhoto.imgSourceName);
				//uuDiy link
				buildUUdiy(newPhoto);
				__isAllowComm=newPhoto.isAllowCmt; //是否允许评论
				__thisPageNum=0; //
				__needSkip2Cmt=false;
				loadComment();	//载入评论
			}	
			
			if(!picErrorNum)
			{
				G('staSpan').innerHTML="<strong>"+newPhoto.imgSN+"</strong>/"+newPhoto.imgAllNum;
				_me.nowPicSn=newPhoto.imgSN;
				_me.allPicNum=newPhoto.imgAllNum;
				var ta=document.createElement('textarea');
				ta.innerHTML=newPhoto.imgName;
				document.body.appendChild(ta);
				document.title=ta.innerHTML;
				document.body.removeChild(ta);
			}
		}
		myJs.load(baseUrl);--%>*/
	}
	this.bntPicName=function(Isrc)
	{
		var srcArr=Isrc.split('/');
		return srcArr[srcArr.length-1];
	}
	this.setBnt=function(bnt1,bnt2)
	{
		this.bnt1=G(bnt1);
		this.bnt2=G(bnt2);
		if(this.bnt1 && this.bnt2) this.bandBnt();
	}
	this.bandBnt=function(){
		this.bnt1.onmouseover	=function(){_me.bnt1.src =_me.bnt1.src.replace('h_prev_no.gif','h_prev_yes.gif');}
		this.bnt1.onmouseout	=function(){ _me.bnt1.src =_me.bnt1.src.replace('h_prev_yes.gif','h_prev_no.gif');}
		this.bnt2.onmouseover	=function(){_me.bnt2.src =_me.bnt2.src.replace('h_next_no.gif','h_next_yes.gif');}
		this.bnt2.onmouseout	=function(){ _me.bnt2.src =_me.bnt2.src.replace('h_next_yes.gif','h_next_no.gif');}
		
		this.bnt1.onmousedown	=function(){if(_me.isGoing) return; _me.go(-1); _me.setCnt(1);  return false;}
		
		
		
		
		this.bnt1.ondragstart	=function(){return false;}
		this.bnt1.onmouseup		=function(){_me.setCnt(0);}
		this.bnt2.onmousedown	=function(){if(_me.isGoing) return;  _me.go(1); _me.setCnt(1); return false;}
		this.bnt2.ondragstart	=function(){return false;}
		this.bnt2.onmouseup		=function(){_me.setCnt(0);}
		

		
		document.onmouseup=function(){_me.setCnt(0);}
		
	}
	
	this.enableBnt=function(dBnt){
		switch(dBnt){
			case -1:this.bnt1.src=this.bnt1.src.replace('h_prev_dis.gif','h_prev_no.gif');  this.bnt1.title=''; this.bnt1.style.cursor='auto'; break;
			case 1 :this.bnt2.src=this.bnt2.src.replace('h_next_dis.gif','h_next_no.gif');  this.bnt2.title=''; this.bnt2.style.cursor='auto'; break;
		}
	}
	
	this.disableBnt=function(direc){

		if(!direc) return;
		if(!this.bnt1 || !this.bnt2) return;
		this.disBnt=direc;
		switch(direc)
		{
			case -1:this.bnt1.src='http://img.baidu.com/hi/img/newalbum/h_prev_dis.gif';  
					this.bnt1.title='已经是第一张'; this.bnt1.style.cursor='default'; break;
			case 1:this.bnt2.src='http://img.baidu.com/hi/img/newalbum/h_next_dis.gif';  
					this.bnt2.title='已是最后一张'; this.bnt2.style.cursor='default';  break;
		}
	}
	this.canGoon=function(t)  
	{
		this.isGoing=true;
		setTimeout("_me.isGoing=false;",t);
	}
	
	var keypress=false;
}

你可能感兴趣的:(prototype,Go)