Wie erstellen Sie kreisförmige animation mit verschiedenen Objekten mithilfe von jQuery?

Wie erstellen Sie kreisförmige animation mit verschiedenen Objekten mithilfe von jQuery. Ich habe selber probiert, aber das Problem ist, dass meine Tasche nicht reibungslos laufen.

Ich möchte diese animieren, aber in der glatten Weg:

Bemühungen :
http://jsfiddle.net/eT7SD/

Html-Code

<div id="apDiv1"><p><img src="http://4.bp.blogspot.com/_UkDBPY_EcP4/TUr43iCI-FI/AAAAAAAADR0/o9rAgCt9d-U/s1600/1242796868203109724Number_1_in_green_rounded_square_svg_med.png"  width="200" height="115" id="img-1"/></p></div>
<div id="apDiv2"><p><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRZv4hqGcyV6OqP0hI3uAiQVwHHgPuqcTl2NppFRyvbxXLVokbs"  width="200" height="115" id="img-2"/></p></div>
<div id="apDiv3"><p><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQaplzZIaF-uTQKnvfK9N9i-Rg27F6aHtSchQZaGR-DITgO1bDwzA"  width="200" height="115" id="img-3"/></p></div>
<div id="apDiv4"><p><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQjTbe5WfEnT840gIChKfbzlVnoPPoZsyrT4zjMReym9YpsRdOFvA"  width="200" height="115" id="img-4"/></p></div>
<div id="apDiv5"><p><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRWtiMAcxGe-RQw2gRwUUiyB5aRTMeVMG5LSCPF0Qpzes-USpgyTw"  width="200" height="115" id="img-5"/></p></div>
<div id="apDiv6"><p><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTXDhOygDcNsNVsv0eIXLYdBx4C-tmedIRhFfxGlCoCfNy04YU_"  width="200" height="115" id="img-6"/></p></div>
<div id="apCenterDiv"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR42cgsKsYMWey79jT0XsTkMOyxc9oej9fVt-udxQvnVFOadpPQ"  width="200" height="115" /></div>

Css-Code

<style type="text/css">
#apCenterDiv {
    position:absolute;
    width:200px;
    height:115px;
    z-index:1;
    left: 571px;
    top: 209px;
}
#apDiv1 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:2;
    left: 570px;
    top: 4px;
}
#apDiv2 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:3;
    left: 821px;
    top: 134px;
}
#apDiv3 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:4;
    left: 822px;
    top: 328px;
}
#apDiv4 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:5;
    left: 572px;
    top: 385px;
}
#apDiv5 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:6;
    left: 319px;
    top: 329px;
}
#apDiv6 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:7;
    left: 319px;
    top: 135px;
}
</style>

Skript

<script>
$(document).ready(function(e) {

      setInterval(function() {

        var imgfirstSrc = $("#img-1").attr("src");
        var imgSecSrc = $("#img-2").attr("src");
        var imgthirdSrc = $("#img-3").attr("src");
        var imgfourthSrc = $("#img-4").attr("src");
        var imgfifthSrc = $("#img-5").attr("src");
        var imgsixthSrc = $("#img-6").attr("src");


        $("#img-2").attr("src",imgfirstSrc);
        $("#img-3").attr("src",imgSecSrc);
        $("#img-4").attr("src",imgthirdSrc);
        $("#img-5").attr("src",imgfourthSrc);
        $("#img-6").attr("src",imgfifthSrc);
        $("#img-1").attr("src",imgsixthSrc);



      },1000);
});
</script>

BEARBEITEN

Muss ich hinzufügen, mehr animation, mit auf - /Stopp-Ereignisse. Wenn der Benutzer klicken Sie auf das rote Bild Platz für 270, die Sie haben, zu ersetzen-den Platz von 90 und die animation stoppen; für mehr Klarheit Sie haben, um zu sehen, das Bild unten. Ich habe versucht @Cristi Pufu code, aber ich will mehr änderungen

Bemühungen
http://jsfiddle.net/SaNtf/

Wie erstellen Sie kreisförmige animation mit verschiedenen Objekten mithilfe von jQuery?

wollen Sie es zu drehen? oder nur die Positionen verändern
hmmm ja .... irgendeine Idee ?
Ich glaube nicht, dass "ja" - Antworten @Spokey 's Frage
Sie gehen zu müssen, einige Sinus-und Cosinus-Funktionen zu bestimmen, die coords, wo die Bilder sollten gehen.
Klang interessant, aber tut mir Leid zu sagen, ich habe keine Ahnung, welcher Ansatz der richtige ist. Sie haben eine Idee zu meinem problem bitte helft mir
Bearbeitet meine Frage

InformationsquelleAutor Query Master | 2013-04-11

8

Mit jQuery Animation: http://jsfiddle.net/eT7SD/6/

Mit mathund jQuery : http://jsfiddle.net/eT7SD/7/

Mit CSS3 Rotation (nur zum Spaß): http://jsfiddle.net/dMnKX/

Fügen Sie einfach ein class 'box' zu animieren divs wie in der fiddle und verwenden Sie diese js:
```
$(document).ready(function(e) {

    var animate = function(){

        var boxes = $('.box');

        $.each(boxes, function(idx, val){

            var coords = $(boxes[idx+1]).position() || $(boxes[0]).position();

            $(val).animate({

                "left" : coords.left,
                "top" : coords.top

            }, 1500, function(){})   

        });
    }

    animate();

    var timer = setInterval(animate, 2000);  
});
```
BEARBEITEN:
```
$(document).ready(function(e) {
    var angles = [90, 45, 315, 270, 225, 135];
    var unit = 215;

    var animate = function(){

        $.each($('.box'), function(idx, val){

            var rad = angles[idx] * (Math.PI / 180);
            $(val).css({
                left: 550 + Math.cos(rad) * unit + 'px',
                top: unit * (1 - Math.sin(rad))  + 'px'
            });

            angles[idx]--;
        });

    }
    var timer = setInterval(animate, 10);

});
```
Ändern Sie die left, top, width, height Eigenschaften von Boxen, standardisieren Sie die korrekte unit (circle radius) und erste angles. Aber für ein Album, ich denke, das ist, was Sie wollen (braucht nur ein wenig mehr Arbeit).

Beispiel: http://jsfiddle.net/eT7SD/7/

Visuelles Verständnis von Winkeln:
- du hast tolle Arbeit
- Überprüfen Sie diese url effinroot.eiremedia.netdna-cdn.com/repo/plugins/forms-controls/... Sie haben wunderbare Arbeit geleistet, aber ich will mehr glatter wie oben url, wenn Sie können es für mich tun ich werde danken, die Sie mit akzeptieren der Antwort
- Danke für das Bearbeiten, Ihre Antwort, aber ich habe eine andere Abfrage, wie man weitere Bilder hinzufügen var angles = [90, 45, 315, 270, 225, 135,value,value];
- Ein Kreis hat 360 Grad. Angenommen, Sie haben 10 Bilder. Also von 360 ° / 10 = 36 Grad zwischen den Bildern. Oben im mittleren Bild hat sich um 90 Grad, so dass die Berichterstattung auf, dass, berechnen Sie die restlichen Winkel. Ich habe ein Bild zum besseren Verständnis
- ich bearbeitet meine Frage finden und Antworten Sie mir so bald wie möglich
- ich fügte hinzu, Stopp/start-Ereignisse, so dass Sie wissen, wie zu machen Sie es zu stoppen. jsfiddle.net/SaNtf/1
- wenn der Benutzer klicken Sie auf den Winkel von 270 die animation zu starten, nachdem der Winkel von 270 erreicht Winkel von 90 die animation zu stoppen, der rest des Winkel-animation durchführen aswell
- ich bin ein wenig beschäftigt bei der Arbeit gerade jetzt, vielleicht später oder morgen werde ich versuchen, Ihnen zu helfen. Sorry, aber ich kann nicht alles tun, die Arbeit für Sie
- Kein problem, nehmen Sie sich Zeit und danke verymuch
- ein update Neueinstufung meine Abfrage
- jsfiddle.net/SaNtf/3 stellen Sie die finalAngle, und wenn Sie klicken Sie auf ein Feld wird es aufhören.
- Sie hat Wunderbaren job, ich weiß, danke ist nicht genug für diese, aber am Ende der Diskussion, danke... ich hoffe, in Zukunft werden wir diskutieren wieder eine andere Frage, so take care and bye
- froh, dass ich helfen konnte. kümmern
- Dies ist eine große Hilfe. sehr schön ein. Ich möchte zu Folgen, Ihre Mathematik Beispiel aber wenn ich alle divs, die als relative animation hält auf Urlaub stellen und gehen in den Boden allmählich. Ich will es reagieren also, wenn meine Seite die änderungen der Breite sollte es immer in der Mitte der Seite. irgendeine Idee, wie ich dies tun kann?
InformationsquelleAutor Cristi Pufu

Nur verwenden, CSS3 um das Bild zu drehen:

html

<div id='container'>
... (all your images here)
</div>

javascript:

<script type='text/javascript'>
window.myRotation=0;
$(document).ready(function(e) {
      setInterval(function() {
        $("#container").css("transform","rotate(" + window.myRotation + "deg)");
        $("#container").css("-ms-transform","rotate(" + window.myRotation + "deg)");
        $("#container").css("-webkit-transform","rotate(" + window.myRotation + "deg)");
        window.myRotation +=20;
      },50);
});
</script>

Sollten Sie .attr zu .css.
Vielen Dank! ich habe es behoben.

InformationsquelleAutor Adrian Maire

Nun habe ich versucht etwas aus, ich denke, es könnte funktionieren

HINWEIS: dies ist nicht der vollständige code und nur ein Beispiel wie es funktionieren könnte

FIDDLE: http://jsfiddle.net/Spokey/eT7SD/2/

NEUE FIDDLE http://jsfiddle.net/Spokey/eT7SD/3/ (6 Bilder)

Ich verwendet .position() von jQuery, um die Positionen der div1 - div6.

Dann wechselte das Bild dort mit .animate().

http://api.jquery.com/position/

http://api.jquery.com/animate/

HTML

<img src="http://4.bp.blogspot.com/_UkDBPY_EcP4/TUr43iCI-FI/AAAAAAAADR0/o9rAgCt9d-U/s1600/1242796868203109724Number_1_in_green_rounded_square_svg_med.png"  width="200" height="115" id="img-1"/>
<img src="http://4.bp.blogspot.com/_UkDBPY_EcP4/TUr43iCI-FI/AAAAAAAADR0/o9rAgCt9d-U/s1600/1242796868203109724Number_1_in_green_rounded_square_svg_med.png"  width="200" height="115" id="img-2"/>
<div id="apDiv1"></div>
<div id="apDiv2"></div>
<div id="apDiv3"></div>
<div id="apDiv4"></div>
<div id="apDiv5"></div>
<div id="apDiv6"></div>
<div id="apCenterDiv"></div>

JavaScript

$(document).ready(function(e) {
      var i = 1;
        var j = 2;
      setInterval(function() {
          if(i===7){i=1;}
          if(j===7){j=1;} 
          var divd = $("#apDiv"+i).position();
          var divds = $("#apDiv"+j).position();
          $("#img-1").stop().animate({left:(divd.left), top:(divd.top)});
          $("#img-2").stop().animate({left:(divds.left), top:(divds.top)});
          i++;j++;
      },1000);
});

hey @Spokey, wie Sie mehr hinzufügen können Sie bitte aktualisieren Sie Js Fiddle
Ich aktualisiert es. Der code ist nicht sehr schön aussehenden, aber es funktioniert, ich denke, Sie können optimieren Sie es in ein paar Zeilen, aber ich habe nicht genug Zeit, jetzt.

InformationsquelleAutor Spokey

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.