Hallo,
nachdem ich mir heute die Nacht um die Ohren geschlagen habe, aber zu keiner Lösung gekommen bin wollte ich einfach mal fragen ob hier vielleicht jemand eine Idee hat wie man mein Ziel umsetzen kann.
Ich stelle mir einen Scrollbalken vor, der von links über unten nach rechts wandert je nach position der maus. Ich habe das ganze schon mal mit einem testdiv erstellt anbei der code.
die ganze Bewegung sollte sich Kreisförmig vollziehen, daher die Berechnung des Abstandes vom Mittelpunkt. Wäre allerdings auch nicht so schlimm, wenn der balken nur am Rand bleiben würde.
Vielen Dank fürs anschauen,
Viele Grüße
nachdem ich mir heute die Nacht um die Ohren geschlagen habe, aber zu keiner Lösung gekommen bin wollte ich einfach mal fragen ob hier vielleicht jemand eine Idee hat wie man mein Ziel umsetzen kann.
Ich stelle mir einen Scrollbalken vor, der von links über unten nach rechts wandert je nach position der maus. Ich habe das ganze schon mal mit einem testdiv erstellt anbei der code.
die ganze Bewegung sollte sich Kreisförmig vollziehen, daher die Berechnung des Abstandes vom Mittelpunkt. Wäre allerdings auch nicht so schlimm, wenn der balken nur am Rand bleiben würde.
Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="jqueryui.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$(document).mousemove(function(e){
var mitteX = 0;
var mitteY = 0;
var abstandquad = 0;
var abstandmitte = 0;
var speed = 0;
var distX = 0;
var distY = 0;
var distabsquad = 0;
var distabs = 0;
var kugelX = 0;
var kugelY = 0;
var kugel = $("div.#kugel");
var position = kugel.position();
var kugelposX = 0;
var kugelposY = 0;
var kugelinecke = 0;
kugelY = (position.top);
kugelX = (position.left);
mitteX = $(window).width() / "2";
mitteY = $(window).height() / "2";
/* abstandquad = (e.pageX - mitteX)*(e.pageX - mitteX) + (e.pageY-mitteY)*(e.pageY-mitteY);
abstandmitte = Math.sqrt(abstandquad);
if (e.pageY > kugelY) {
distY = e.pageY - kugelY;
} else {
distY = kugelY - e.pageY;
}
if (e.pageX > kugelX) {
distX = e.pageX - kugelX;
} else {
distX = kugelX - e.pageX;
}
distabsquad = (e.pageX - distX)*(e.pageX - distX) + (e.pageY-distY)*(e.pageY-distY);
distabs = Math.sqrt(distabsquad);*/
kugelinecke = mitteX / 2;
$('#status').html(e.pageX +', '+ kugelinecke);
/*Falls Maus am rechten rand*/
if ((kugelinecke * "3") < e.pageX){
/*Falls kugel am unteren Rand*/
if (kugelY == "90%") {
$("div.#kugel").stop().animate({left:"90%"},500,"easeOutExpo");
$("div.#kugel").stop().animate({top:"e.pageY"},2000,"easeOutExpo");
}else {
$("div.#kugel").stop().animate({top:"e.pageY"},2000,"easeOutExpo");
}
}else{
/*Falls Maus am linken rand*/
if (kugelinecke > e.pageX && e.pageX < mitteX) {
/*Falls kugel am unteren Rand*/
if (kugelY == "90%") {
$("div.#kugel").stop().animate({left:"10%"},500,"easeOutExpo");
$("div.#kugel").stop().animate({top:"e.pageY"},2000,"easeOutExpo");
}else {
$("div.#kugel").stop().animate({top:"e.pageY"},2000,"easeOutExpo");
}
}else{
$("div.#kugel").stop().animate({left:"e.pageX"},1000,"easeOutExpo");
}
$("div.#kugel").stop().animate({top:"e.pageY",left:"e.pageX"},2000,"easeOutExpo");
}
});
});Vielen Dank fürs anschauen,
Viele Grüße
Zuletzt bearbeitet:
