Chris: Bildausschnitt verschieben bei Mausbewegung

Beitrag lesen

SELF-Forum

Bildausschnitt verschieben bei Mausbewegung

Chris
– Informationen zu den Bewertungsregeln

Also danke erstmals für die Inputs.

Ich habe etwas Zeit gefunden und etwas fast brauchbares entworfen.

Meine Frage nun: Wenn ich scrolle ist es nicht wirklich flüssig und ich muss auch immer mit der Maus bewegen. (ist auch logisch, da onmousemove)

Mit JQUERY.animate(); kann ich es zwar flüssiger bewegen
$("#draggable").animate({"left": "+=20px"}, "500");
Es bewegt sich und bremst ab nach 20px; und dann wieder 20px bewegen und abbremsen, also nicht wirklich eine konstante Bewegung.

Hier mal mein Code:

Danke für Tipps und Verbesserungsvorschläge.

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
       "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<title>Bildausschnitt bewegen mit JQUERY</title>  
  
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>  
<script type="text/javascript">  
  
  
</script>  
<style>  
#headerbild {  
border: 2px solid grey;  
width:660px;  
height:200px;  
overflow:hidden;  
}  
  
#draggable {  
	left:0px;  
	top:0px;  
	position:relative;  
}  
  
</style>  
  
</head>  
<body>  
  
<div id="headerbild">  
<img id="draggable" src="http://upload.wikimedia.org/wikipedia/commons/archive/6/6c/20070308024414!Angkor_Wat_from_north_pond.JPG" />  
</div>  
<br />  
<div id="result">Maus über das Bild bewegen</div>  
<div id="trackme"></div>  
  
<script type="text/javascript">  
  
  	var moveLeft = "";  
	var moveRight = "";  
	var moveUp = "";  
	var moveDown = "";	  
	  
	var imgWidth = $("#draggable").width();  
	var imgHeight = $("#draggable").height();  
	  
	var startLeft = "-1300px";  
	var startTop = "-1100px";  
	  
	var myOffset = 30;  
	  
	$("#draggable").css('left', startLeft);  
	$("#draggable").css('top', startTop);  
  
$("#headerbild").mousemove(function(e){  
	var relativeX = e.pageX - this.offsetLeft;  
	var relativeY = e.pageY - this.offsetTop;  
  
	  
	if(relativeX <= 30) {  
		moveLeft = true;  
		var posLeft = parseInt($("#draggable").css('left').replace("/px/i", ""));  
		if(posLeft < -5) {  
			//$("#draggable").animate({"left": "+=20px"}, "500");  
			$("#draggable").css('left', posLeft+=3);  
			$("#trackme").append("l-");  
		}  
	} else {  
		if(moveLeft===true) {  
			$("#trackme").append(" [out] ");  
			moveLeft = false;  
			$("#draggable").clearQueue();  
			$("#draggable").stop();			  
		}  
	}  
	  
	if(relativeX >= 630) {  
		moveRight = true;  
		var posRight = parseInt($("#draggable").css('left').replace("/px/i", ""));  
		if(posRight > 665 - imgWidth) {  
			//$("#draggable").animate({"left": "-=200px"}, "300");  
			$("#draggable").css('left', posRight-=3);  
			$("#trackme").append("r-");  
		}  
	} else {  
		if(moveRight===true) {  
			$("#trackme").append(" [out] ");  
			moveRight = false;  
			$("#draggable").clearQueue();  
			$("#draggable").stop();			  
		}  
	}  
	if(relativeY <= 30) {  
		moveUp = true;  
		var posUp = parseInt($("#draggable").css('top').replace("/px/i", ""));  
		if(posUp < -5) {  
			//$("#draggable").animate({"top": "+=20px"}, "200");  
			$("#draggable").css('top', posUp+=3);  
			$("#trackme").append("u-");  
		}  
	} else {  
		if(moveUp===true) {  
			$("#trackme").append(" [out] ");  
			moveUp = false;  
			$("#draggable").clearQueue();  
			$("#draggable").stop();			  
		}  
	}  
	if(relativeY >= 170) {  
		moveDown = true;  
		var posDown = parseInt($("#draggable").css('top').replace("/px/i", ""));  
		if(posDown > 205 - imgHeight) {  
			//$("#draggable").animate({"top": "-=20px"}, "100");  
			$("#draggable").css('top', posDown-=3);  
			$("#trackme").append("d-");  
		}  
	} else {  
		if(moveDown===true) {  
			$("#trackme").append(" [out] ");  
			moveDown = false;  
			$("#draggable").clearQueue();  
			$("#draggable").stop();			  
		}  
	}  
	  
	$("#result").text(" mousecords ( " + relativeX + ", " + relativeY + " ) direction [ left:" + moveLeft + " | right: " + moveRight + " | up: "+ moveUp + " | down: "+ moveDown + " ]");  
	  
});  
$("#headerbild").mouseout(function(e){  
	$("#draggable").clearQueue();  
	$("#draggable").stop();		  
});  
  
  
</script>  
</body>  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln