javascript - Image resize script.. - Udvikleren.dk - Programmering, webdesign og grafik

Tags: javascript

Bruger #7944 @ 19.09.07 19:46

Hej Udviklere..

Jeg sidder lige og leger lidt med javascript (fedt sprog!!!) men er kørt lidt fast med en funktion jeg vil lave.

Jeg har lavet første del, som virker fint nok, den skal skalere billedet op, til en given størrelse, og hvis den er sådan, og man trykker på billedet skal den gøre det modsatte.

Men hvordan?!

Lidt kode:

Kode

var thumb1FullWidth = 500;
var thumb1Width = 120;

var increaseSize = 5;



function englargeImage() {
	
	setTimeout('englargeImage()', 1);
	
	if(thumb1Width != thumb1FullWidth) {
		if(thumb1Width <= thumb1FullWidth-increaseSize) {
		thumb1Width += increaseSize;
		}
	}
	
	document.getElementById('thumb1').width = thumb1Width;
	
}

Ser frem til jeres svar

7 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 2 karma

Sorter efter stemmer Sorter efter dato

Bruger #6559 @ 19.09.07 20:13

843

Hvis du nu siger billedet skal være 100 px så laver du en if-else...

Kode

if(thumb1Width <= thumb1FullWidth-increaseSize) {
thumb1Width += increaseSize;
}
else if(thumb1Width >= thumb1FullWidth-increaseSize)
thumb1Width -= increaseSize;
}

Har ikke testet det.

Bruger #10216 @ 19.09.07 22:13

4.283

Kode

<script>
	var size = function(){
		var speed = 5;
		var oldSize;
		var animDone;
		
		/**
		 * Animeret ændring af bredde på et given element.
		 * @param {HTML element} el Element
		 * @param {number} newSize Ny bredde på objekt
		 */
		var sizeUp = function(el,newSize) {
			oldSize = el.offsetWidth;
			
			if(oldSize != newSize) {
				animDone = false;
				if(oldSize < newSize) {
					oldSize += speed;
					
					// Her styles bredden
					el.style.width = oldSize+'px';
				}
				var fn = function() { sizeUp(el,newSize) };
				var t = setTimeout(fn, 1);
			} else {
				animDone = true;
			}
		}

		/**
		 * Animeret ændring af bredde på et given element.
		 * @param {HTML element} el Element
		 * @param {number} newSize Ny bredde på objekt
		 */
		var sizeDown = function(el,newSize) {
			oldSize = el.offsetWidth;
			
			if(oldSize != newSize) {
				animDone = false;
				if(oldSize > newSize) {
					oldSize -= speed;
					
					// Her styles bredden
					el.style.width = oldSize+'px';
					
				}
				var fn = function() { sizeDown(el,newSize) };
				var t = setTimeout(fn, 1);
			} else {
				animDone = true;
			}
		}

		
		return {
			/**
			 * Animeret ændring af bredde på et given element.
			 * @param {HTML element} el Element
			 * @param {number} newSize Ny bredde på objekt
			 */
			to : function(el, newSize) {
				if(animDone !== false) {
					if(this.getSize(el) < newSize) {
						sizeUp(el,newSize);
					} else {
						sizeDown(el,newSize);
					}
				}
			},
			/**
			 * Fanger offsetWidth på et element.
			 * @param {HTML element} el Element
			 */
			getSize : function(el) {
				return el.offsetWidth;
			},
			/**
			 * Tester om et elements bredde er inden for 10px af den angivne bredde
			 * @param {HTML element} el Element
			 * @param {number} size Bredde som testes med.
			 */
			isNear : function(el,size) {
				var dis = Math.sqrt((size - el.offsetWidth) * (size - el.offsetWidth));
				return dis <= 10;
			}
		}
	}();
</script>

<img src="sImages/tb-bg.jpg" onclick="size.to(this,size.isNear(this,500) ? 100 : 500)" alt="" />

Her er det hele poppet ind i et singleton objekt. Gik lige lidt amok. Det er kun testet i firefox, men burde virke i de fleste browsere.

Indlæg senest redigeret d. 19.09.2007 22:16 af Bruger #10216

Bruger #10216 @ 19.09.07 19:51

4.283

Omskriv din kode til at gøre det nøjagtige modsatte. Så nemt er det...

Det er lige som med plus og minus.

eller gange og dividere...

Bruger #7944 @ 19.09.07 19:54

Ja, men jeg ville gerne gøre så jeg kunne kalde det med den samme funktion, hvis du forstår..

Så når man trykker på billedet når det er i fuld størrelse, så skal det gøres mindre.

Hele koden er her hvis det hjælper

Kode

<!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=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script language="javascript">
var thumb1FullWidth = 500;
var thumb1Width = 120;

var increaseSize = 5;



function englargeImage() {
	
	setTimeout('englargeImage()', 1);
	
	if(thumb1Width != thumb1FullWidth) {
		if(thumb1Width <= thumb1FullWidth-increaseSize) {
		thumb1Width += increaseSize;
		}
	}
	
	document.getElementById('thumb1').width = thumb1Width;
	
}
</script>
</head>

<body>
<center>
<img id="thumb1" name="thumb1" class="thumb" onclick="englargeImage();" src="lp.jpg" width="120" />
</center>
</body>
</html>

Bruger #7944 @ 19.09.07 20:49

Det virker desværre ikke, da den så vil prøve at gøre billedet fuld størrelse igen, hver gang den har gjort det 1 gang mindre

Bruger #7944 @ 20.09.07 16:08

Mange tak Gnu.

Det er ens i både IE7 og Firefox

Bruger #11574 @ 22.09.07 16:38

Kode

<script>
	var size = function(){
		var speed = 5;
		var oldSize;
		var animDone;
		
		/**
		 * Animeret ændring af bredde på et given element.
		 * @param {HTML element} el Element
		 * @param {number} newSize Ny bredde på objekt
		 */
		var sizeUp = function(el,newSize) {
			oldSize = el.offsetWidth;
			
			if(oldSize != newSize) {
				animDone = false;
				if(oldSize < newSize) {
					oldSize += speed;
					
					// Her styles bredden
					el.style.width = oldSize+'px';
				}
				var fn = function() { sizeUp(el,newSize) };
				var t = setTimeout(fn, 1);
			} else {
				animDone = true;
			}
		}

		/**
		 * Animeret ændring af bredde på et given element.
		 * @param {HTML element} el Element
		 * @param {number} newSize Ny bredde på objekt
		 */
		var sizeDown = function(el,newSize) {
			oldSize = el.offsetWidth;
			
			if(oldSize != newSize) {
				animDone = false;
				if(oldSize > newSize) {
					oldSize -= speed;
					
					// Her styles bredden
					el.style.width = oldSize+'px';
					
				}
				var fn = function() { sizeDown(el,newSize) };
				var t = setTimeout(fn, 1);
			} else {
				animDone = true;
			}
		}

		
		return {
			/**
			 * Animeret ændring af bredde på et given element.
			 * @param {HTML element} el Element
			 * @param {number} newSize Ny bredde på objekt
			 */
			to : function(el, newSize) {
				if(animDone !== false) {
					if(this.getSize(el) < newSize) {
						sizeUp(el,newSize);
					} else {
						sizeDown(el,newSize);
					}
				}
			},
			/**
			 * Fanger offsetWidth på et element.
			 * @param {HTML element} el Element
			 */
			getSize : function(el) {
				return el.offsetWidth;
			},
			/**
			 * Tester om et elements bredde er inden for 10px af den angivne bredde
			 * @param {HTML element} el Element
			 * @param {number} size Bredde som testes med.
			 */
			isNear : function(el,size) {
				var dis = Math.sqrt((size - el.offsetWidth) * (size - el.offsetWidth));
				return dis <= 10;
			}
		}
	}();
</script>

<img src="sImages/tb-bg.jpg" onclick="size.to(this,size.isNear(this,500) ? 100 : 500)" alt="" />

Her er det hele poppet ind i et singleton objekt. Gik lige lidt amok. Det er kun testet i firefox, men burde virke i de fleste browsere.

Nice script.. kunne det evt modificeres således at man "zoome" ud og ind på det samme billede? altså sådan at man har 500px billede, så zoomer man det ned til 100, klikker man igen kommer det tilbage på de 800..

Image resize script..

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler