JavaScript Objekte (Bilder) verschieben und Positionsänderung auswerten

[Fat32Tony]

Hey.

Ich würd gern auf einer Website auf der X-achse verschiebbare Grafiken einfügen. Das ganze bekomme ich bestimmt auch noch alleine hin, was mir allerdings Kopfschmerzen bereitet ist das abfragen der Position bzw. das spätere Auswerten dieser Informationen.



Ideal wäre es wenn diese Container anhand der roten Linien einrasten würden, welche dann jeweils eine bestimmte Anzahl von Pixeln auseinander wären. Zudem sollten die Bilder eine variable Breite besitzen also würde mich der Abstand des linken Bildrandes zum Rand des übergeordneten Div Containers interessieren. Gibt es da eine einfache Möglichkeit dies in Javascript abzufragen?

 

[Yuuri]

Geht durchaus mit purem JS.

<style type="text/css">
body {
	padding: 0;
	margin: 0;
}
div {
	position: absolute;
	left: 128px;
	top: 48px;
	width: 780px;
	background: red;
}
div > img {
	position: relative;
	display: block;
	margin-bottom: 1em;
}

img:nth-child(1) { left: 128px; }
img:nth-child(2) { left: 32px; }
img:nth-child(3) { left: 256px; }
img:nth-child(4) { left: 64px; }
</style>
<div>
	<img src="imagick-test-original-s.jpg" data-dir="l">
	<img src="imagick-test-original-xs.jpg">
	<img src="imagick-test-original-xxs.jpg" data-dir="l">
	<img src="imagick-test-original-m.jpg">
</div>
<script type="text/javascript">

window.onload = function() { f(); window.setInterval( f, 1 ); };

var f = function()
{
	var container = document.querySelector( "div" ),
		crect = {
			left: container.offsetLeft,
			right: container.getBoundingClientRect().width
		};
	
	Array.prototype.forEach.call( document.querySelectorAll( "img" ), function( node, index )
	{
		var rect = {
			left: node.offsetLeft,
			right: node.offsetLeft + node.getBoundingClientRect().width
		},
			dir = node.dataset.dir || (node.dataset.dir = "r");
		
		if( rect.right > crect.right )
		{
			node.dataset.dir = dir = "l";
		}
		else if( rect.left <= 0 )
		{
			node.dataset.dir = dir = "r";
		}
		
		var step = (dir == "r" ? 1 : -1),
			l = rect.left + step;
		
		node.style.left = l + "px";
	} );
};
</script>

An deiner Stelle wäre jQuery o.ä. aber angebrachter, da es einerseits weniger Code ist, andererseits browserübergreifend funktioniert und du weiterhin die Sachen animieren kannst, inkl. der Erstellung/Verwendung einer Animationskurve. Außerdem musst du keinen Timer drüberlaufen lassen, sondern kannst alles asynchron und mit Callbacks steuern.

 

[fz21z]

Zeile 42: Ist es ratsam in die prototype chain von "bulit in objects" einzugreifen/erweitern?

 

[palace4d]

Zeile 42: Ist es ratsam in die prototype chain von "bulit in objects" einzugreifen/erweitern?

Da wird nichts erweitert. Es wird lediglich die forEach Methode von Arrays auf Static NodeLists angewandt, um darüber zu iterieren. Das funktioniert da durch call ein neuer Empfänger übergeben wird.
Eine weitere Möglichkeit wäre es die Static NodeList in ein Array umzuwandeln per Array.prototype.slice.call()