jQuery - Animation bei Mausgesten

Crackp0t · 18.04.2010

Ich will eine Galerie in jQuery basteln und orientiere mich dabei an folgender Vorlage: Dynamic Drive DHTML Scripts- CMotion Image Gallery

Nun steh ich mit meinen Überlegungen ein wenig auf dem Schlauch...

Der 1. Ansatz ist die Position der Maus mithilfe des X-Wertes von mousemove() abzüglich des X-Wertes von der Containerposition abzufragen. Dann müsste ich eine Fallunterscheidung durchführen, in welche Richtung gescrollt werden muss und wie schnell. Bis auf die Geschwindigkeit bekomme ich das Gerüst noch hin.

Mein 2. Ansatz besteht aus 2 Feldern am linken und rechten Rand des gesammten Containers. Bei mouseover() soll in die entsprechende Richtung gescrollt werden.

Bei beidem stoße ich aber nun mit der Scrollanimation an meine Grenzen. Nach jedem Frame der Animation müsste ja überprüft werden, ob sich die Maus noch im entsprechenden Bereich befindet.

Wie gehe ich in jQuery vor um das zu realisieren?

Danke für eure Ansätze

cebito · 18.04.2010

AW: jQuery - Animation bei Mausgesten

Was hast du denn bisher - Quellcodemäßig? Zeig mal her, kann ja nicht so viel sein, wenn du das Grundlegende schon hast.

Crackp0t · 18.04.2010

AW: jQuery - Animation bei Mausgesten

Hier ist der relevante Code für den ersten Ansatz:

index.html

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="jquery-1.4.2.js"></script>
        <script type="text/javascript" src="tools.js"></script>
        <link rel="stylesheet" type="text/css" href="style.css" />
        <title></title>
    </head>
    <body>
                                                        
           <div id="slideOuter">
               <div id="slideContainer">
                   <div id="slideObject"></div>
               </div>
           </div>
                    
    </body>
</html>

style.css

PHP:

#slideOuter {

    outline: solid 1px yellow;


    background-color: #000;
    position: absolute;
    overflow: hidden;
    top: 125px;
    height: 350px;
    width: 900px;
}

#slideContainer {

    
    position: absolute;
    padding: 5px;
    top: 0px;
    left: 0px;
    height: inherit;
    width: inherit;
    
}

#slideObject {
    outline: solid 1px #707070;
    
    position: relative;
    height: 340px;
    width: 350px;
    
}

tools.js

PHP:

$(document).ready(function(){
$("#slideOuter").mousemove(function(e){

var mouseXAxis = $("#slideOuter").e.pageX-$("#slideOuter").position.left;
if(mouseXAxis < '200px') //hier sollte die scrollanweisung nach links stehen
if(mouseXAxis > '700px') //hier sollte die scrollanweisung nach rechts stehen

});
});

Beim 2. Ansatz wären noch 2 weitere DIV positioniert die dann mit dem entsprechenden Event versehen werden.

Duddle · 18.04.2010

AW: jQuery - Animation bei Mausgesten

Habe mal testweise was probiert, mit dem zumindest das dauerhafte Prüfen der Mausposition gezeigt wird:

HTML:

<!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>
		<title>*****scroll</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	</head>
	<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" language="javascript" charset="utf-8">
	//<![CDATA[
		var mouseX = 0;
		var mouseY = 0;
		function checkMousePos() {
			var $s = $("#scroller");
			var relX = mouseX - $s.offset().left;
			var relY = mouseY - $s.offset().top;
			console.log(relX+","+relY);
		}
		$(document).ready(function() {
			var $s = $("#scroller");
			$s.mousemove(function(e) {
				mouseX = e.pageX;
				mouseY = e.pageY;
			});
			$s.hover(function(e) {
				checkMousePositionInterval = setInterval("checkMousePos()", 200);
			}, function(e) {
				clearInterval(checkMousePositionInterval);
			});
		});
	//]]>
	</script>

	<body>
		<div id="scroller" style="border:2px solid black; margin:auto; width:900px; height:150px">
		</div>
	</body>
</html>

(jQuery-Pfad anpassen!)

Aus der relativen Position zueinander und der Breite des Feldes kannst du leicht ableiten, wie schnell die Scroll-Animation arbeiten soll. Entsprechend bewegst du dann die Elemente hin und her (bzw. bewegst die seitliche Scroll-Leiste).

Ob das aber schön sauber aussieht, bezweifle ich gerade mal. Möglicherweise musst du dafür direkt animate() von jQuery nutzen, das interpoliert ja schön und kann auch relative Animationen.

Duddle