Jojoxx.net logotyp

 

 

Användare ikonAnvändare
Besökare just nu: 97
Snabblänkar ikonSnabblänkar
JavaScript-arkivet
Perl
FAQ

Sök på Jojoxx.net


Bildpanorering och zoom

Exempel

Bilder från freedigitalphotos.net

Kod


<script type="text/javascript">
/* Detta script finns att hämta på http://www.jojoxx.net och 
   får användas fritt så länge som dessa rader står kvar. */ 

var imagesSrc=new Array(
"http://www.jojoxx.net/images/testbild001.jpg",
"http://www.jojoxx.net/images/testbild002.jpg",
"http://www.jojoxx.net/images/testbild003.jpg");

var frameWidth=300;  // Bredd på visningsfönster
var frameHeight=220; // Höjd på visningsfönster
var steps=100;       // Antal steg i varje animation

var images=new Object();
images.loaded=0;
images.toload=imagesSrc.length;
images.step=0; images.currentImage=0;
images.anim=function(){
	if(images.step==0){
		var tmp;
		if(Math.random()>0.5){
			tmp=images[images.currentImage].panFromX; images[images.currentImage].panFromX=images[images.currentImage].panToX; images[images.currentImage].panToX=tmp;
			tmp=images[images.currentImage].panFromY; images[images.currentImage].panFromY=images[images.currentImage].panToY; images[images.currentImage].panToY=tmp;
			tmp=images[images.currentImage].scaleFromWidth; images[images.currentImage].scaleFromWidth=images[images.currentImage].scaleToWidth; images[images.currentImage].scaleToWidth=tmp;
			tmp=images[images.currentImage].scaleFromHeight; images[images.currentImage].scaleFromHeight=images[images.currentImage].scaleToHeight; images[images.currentImage].scaleToHeight=tmp;
		}
		if(images[images.currentImage].scaleFromWidth!=images[images.currentImage].scaleToWidth){
			images[images.currentImage].panFromX=images[images.currentImage].panToX=0;
			images[images.currentImage].panFromY=images[images.currentImage].panToY=0;
			if(Math.random()>0.5){
				if(images[images.currentImage].scaleFromWidth>images[images.currentImage].scaleToWidth){
					images[images.currentImage].panFromX=-(images[images.currentImage].scaleFromWidth-frameWidth);
				} else {
					images[images.currentImage].panToX=-(images[images.currentImage].scaleToWidth-frameWidth);
				}
			}
			if(Math.random()>0.5){
				if(images[images.currentImage].scaleFromHeight>images[images.currentImage].scaleToHeight){
					images[images.currentImage].panFromY=-(images[images.currentImage].scaleFromHeight-frameHeight);
				} else {
					images[images.currentImage].panToY=-(images[images.currentImage].scaleToHeight-frameHeight);
				}
			}
		}
		document.getElementById("picture").src=images[images.currentImage].src;
	}
	images.step++;
	if(images.step==steps){
		images.step=0; images.currentImage=(images.currentImage<images.toload-1)?images.currentImage+1:0;
	}
	document.getElementById("picture").width=getIntervalPos(images[images.currentImage].scaleFromWidth,images[images.currentImage].scaleToWidth,(images.step/steps)*100);
	document.getElementById("picture").height=getIntervalPos(images[images.currentImage].scaleFromHeight,images[images.currentImage].scaleToHeight,(images.step/steps)*100);
	document.getElementById("panframe").style.top=getIntervalPos(images[images.currentImage].panFromY,images[images.currentImage].panToY,(images.step/steps)*100)+"px";
	document.getElementById("panframe").style.left=getIntervalPos(images[images.currentImage].panFromX,images[images.currentImage].panToX,(images.step/steps)*100)+"px";
	setTimeout("images.anim()",50);
}
document.write('<div id="pictureframe" style="position:relative;width:'+frameWidth+'px;height:'+frameHeight+'px;border:solid black 1px;overflow:hidden;"><div id="panframe" style="position:absolute;top:-50px;"><img id="picture"></div></div>');
for(var i in imagesSrc){
	images[i]=new Image();
	images[i].onload=function(){
		this.orgWidth=this.width; this.orgHeight=this.height;
		var xFactor=frameWidth/this.orgWidth; var yFactor=frameHeight/this.orgHeight;
		this.scale=(xFactor<0 && yFactor<0)?Math.min(xFactor,yFactor):Math.max(xFactor,yFactor);
		this.scaleFromWidth=Math.round(this.orgWidth*this.scale)+1
		this.scaleFromHeight=Math.round(this.orgHeight*this.scale)+1
		this.scaleToWidth=Math.round(this.scaleFromWidth*1.15);
		this.scaleToHeight=Math.round(this.scaleFromHeight*1.15);
		this.panFromX=0; this.panFromY=0; this.panToX=0; this.panToY=0;
		if(Math.abs(xFactor-yFactor)>0.3){
			this.scaleToWidth=this.scaleFromWidth;
			this.scaleToHeight=this.scaleFromHeight;
			if(this.scaleFromWidth-frameWidth>1){
				this.panToX=-(this.scaleFromWidth-frameWidth);
			} else {
				this.panToY=-(this.scaleFromHeight-frameHeight);
			}
		}
		images.loaded++;
		if(images.loaded==images.toload){ images.anim(); }
	}
	images[i].src=imagesSrc[i];
}
function getIntervalPos(start,stop,percent){ return(start+((stop-start)*(percent/100))); }
</script>
<p>Bilder från <a href="http://www.freedigitalphotos.net/">freedigitalphotos.net</a></p>


,