JavaScript / jQuery: Folgen Sie Pfad über Seite

StackOverflow https://stackoverflow.com/questions/2400266

Frage

Ich muss ein animiertes gif machen ‚eine Seite überfliegen und einen Pfad folgen. Ich denke, jQuery zu verwenden, aber ich würde in das Denken der einzige Weg richtig sein, es zu tun manuell den Prozentsatz der Breite / Höhe ist die Berechnung, wo die Formebene platziert werden soll, dann die absolute Positionierung verwendet, ist der einzige Weg, dies zu tun? Ich weiß, es gibt einige erstaunliche jQuery Plugins für diese Art der Sache.

War es hilfreich?

Lösung 2

scheint jQuery die Art und Weise zu sein zu gehen, einfach und eher ein Hack als eine Lösung, aber wenn Sie auf jeden Fall brauchen, um etwas mit JS. 

<style type="text/css">
#butterfly 
{
    display:block;
    background: #f00;
    width: 100px;
    height: 100px;
    left: 0;
    top: 0;
    position: fixed;
    background: url(butterfly.gif) no-repeat;
}
</style>
<script type='text/javascript'>
    function moveButterfly() {
        //moveDemo(document.getElementById('butterfly'), 10);
        var butterfly = $('#butterfly');
        var positions = [
            { props: { left: '25%', top: '20%' }, time: 1000 },
            { props: { left: '40%', top: '18%' }, time: 610 },
            { props: { left: '58%', top: '38%'}, time: 400 },
            { props: { left: '81%', top: '52%' }, time: 520 },
            { props: { left: '150%', top: '67%'}, time: 440 },
        ];
        jQuery.each(positions, function(i, e) {
            butterfly.animate(e.props, e.time);
        });
    }
    $().ready(function() {
        moveButterfly();
    });
</script>

Andere Tipps

Die absolute Positionierung ist wahrscheinlich die am besten Art und Weise zu sein, es zu tun, ja. (Ich würde meine Hand nicht auf Herz gelegt mit den Worten, es ist die nur Art und Weise, ich bin sicher, dass Sie andere Spiele spielen könnte etwas Ähnliches zu tun, aber Sie wollen wahrscheinlich nicht zu.)

Sie müssen es als Prozentsatz nicht tun, es sei denn, dass für Ihr Problem Intrinsic ist. Im Folgenden wird gerne ein Element machen absolut positioniert und dann bewegen sie 5 Pixel nach rechts und unten jede 10-Sekunde für bis zu ‚count‘ Iterationen: 

function moveDemo(element, count) {

    element.style.position = "absolute";
    moveit();

    function moveit() {
        element.style.left = ((parseInt(element.style.left) || 0) + 5) + "px";
        element.style.top  = ((parseInt(element.style.top)  || 0) + 5) + "px";
        if (count-- > 0) {
            setTimeout(moveit, 100);
        }
    }
}

Das ist nur roh JavaScript, aber Frameworks wie jQuery, Prototype, Schließung, YUI, usw. helfen Sie mit einer Menge von Dingen und sind diskussionswürdig. Zum Beispiel, wenn Sie die oben verwenden, es sei denn, Sie das Element absolut positionieren, im Voraus zu machen und auch die links und oben Stile auf dem Elemente selbst (über ein Inline-style Attribut) angeben, wird es auf 0,0 zu Beginn springen und starten Sie dann von dort zu bewegen. Frameworks können Sie mit dem ziemlich komplexe Aufgabe, herauszufinden, helfen, wo ein Inline-Element ist es absolut positioniert, bevor sie.

Hier ist ein vollständiges Beispiel, das nicht auf einem Rahmen angewiesen ist (aber wahrscheinlich sollte, zumindest für die Bestimmung der Ausgangsposition von ‚myElement‘): 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Move It Demo Page</title>
<style type='text/css'>
body {
    font-family: sans-serif;
}
#myElement {
    border:     1px solid black;
}
</style>
<script type='text/javascript'>
function startMoving() {

    moveDemo(document.getElementById('myElement'), 10);
}

function moveDemo(element, count) {

    element.style.position = "absolute";
    moveit();

    function moveit() {
        element.style.left = ((parseInt(element.style.left) || 0) + 5) + "px";
        element.style.top  = ((parseInt(element.style.top)  || 0) + 5) + "px";
        if (count-- > 0) {
            setTimeout(moveit, 100);
        }
    }
}
</script>
</head>
<body><div>
<input type='button' value='Start' onClick="startMoving();">
<div id='myElement'>I'm on the move</div>
</div></body>
</html>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top