Вопрос по jquery, image, css – Поворот нескольких изображений по кругу с помощью jquery

4

Мне нужно повернуть несколько изображений в одном круге орбиты с помощью jquery. Я изменил и задержал временные интервалы для обоих изображений. Проблема в том, что оба изображения перекрываются через несколько секунд. мой код

<code>            <script type="text/javascript">
            var p = 0;

            function moveit() {
            p += 0.02;

            var r = 135;
            var xcenter = 500;
            var ycenter = 200;
            var newLeft = Math.floor(xcenter + (r * Math.cos(p)));
            var newTop = Math.floor(ycenter + (r * Math.sin(p)));
            $('#friends').animate({
                    top: newTop,
                    left: newLeft,
                }, 10, function() {
                    moveit();
            $('#friends2').animate({
                top: newTop,
                left: newLeft,
            },15, function() {
                moveit();
            });
             }
            $(document).ready(function() {
                moveit();    
            });
            </script>
</code>

мои исходные коды CSS и HTML

<code>   #friends { position: absolute;     }         
     #friends2 { position: absolute;    }     

 <img src="Images/info.gif" id="friends"/>
<img src="Images/circle.jpg" id="circles" />
<img src="Images/help.gif" id="friends2" />
</code>

Живая демоверсия:http://jsfiddle.net/W69s6/embedded/result/ но это для одного изображения .. Любое предложение ??

редактировать::     мое изображение rotation of images

или же

образец ссылкиhttp://www.templatemonster.com/demo/38228.html

Jsfiddle.net / 5fvc5 / 3 дай мне знать, если ты хочешь, чтобы я поставил это как ответ, ура Tats_innit
Когда ты говоришь вращаться, ты имеешь в виду циклический просмотр изображений, а не вращение вокруг оси, да? Thinking Sites
спасибо Tats_innit.но мне нужно повернуть три изображения на одной орбите без наложения .? kk1076
Hiya, Вы можете получить хорошую идею из одного из моих старых ответов здесь человек: / Stackoverflow.com вопросы / 10294720 / ... пожалуйста, взгляните; Cheerios! рабочая демоверсия Jsfiddle.net / 5fvc5 дайте мне знать, если это поможет, я опишу это как ответ! Tats_innit
спасибо еще раз .Tats_innit .. посмотрите мое изображение, и я хочу, чтобы изображения вращались на орбите d .. kk1076

Ваш Ответ

2   ответа
5

Проверьте этот пример

У него есть две вещи, которые вращается по той же орбите с той же скоростью. Это никогда не будет пересекаться.

РЕДАКТИРОВАТЬ

А также вот пример для 4 элементов, которые должны вращаться с одинаковой скоростью и одинаковой орбитой, но одинаково разделенных.

Чтобы добавить больше элементов, просто измените код, добавив к нему другой угол.

ОБНОВИТЬ

А вот и простая версия изображения

Надеюсь, это поможет. Ура !!!

спасибо libin .. я могу остановить вращение, когда оно зависает на изображении ?? kk1076
а иногда это останавливает вращение .. kk1076
Согласно коду, это никогда не остановится. Если вы видите, что он останавливает вращение, то, вероятно, это происходит при сбое jQuery или какой-либо ошибке кэша. Libin
да, его остановки п продолжаются снова. kk1076
Можете ли вы указать, который определяет скорость вращения? , значение p или значение 10 в функции moveit () ?? kk1076
1

Ваш первый вызов на Moveit не был правильно завершен.

У него одна и та же орбита, разные скоростиhttp: //jsfiddle.net/thinkingsites/FyMCc

РЕДАКТИРОВАТ

Ваша ошибка заключалась в том, что команда вращала оба элемента в одной и той же функции. Они оба взяли одну и ту же верхнюю и левую стороны и всегда были связаны друг с другом, не говоря уже о том, что они оба вызывали moveit (), поэтому при каждом вызове moveit он вызывался бы вдвое больше внутри.

Я исправил вашу рекурсию, так что это происходит только один раз, и заставил moveit принять целевой элемент, а также другую начальную позицию (смещение).

У этого есть та же самая орбита, та же самая скорость, различные местоположенияhttp: //jsfiddle.net/thinkingsites/QAT7C/11

Это все еще перекрывает .. Смотрите это в течение 20 сек Libin
Так ты хочешь, чтобы они находились в разных местах, на одной орбите, на разных скоростях? Thinking Sites
Я сделал правку, которая делает одну и ту же орбиту с той же скоростью, но в разных местах. Thinking Sites

Похожие вопросы