Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 05.02.2014, 01:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

Synov_son,
угол поворота задать непроблема -- но лучше видеть что вы хотите сделать и что с чем у вас совпадает.
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
 #menu, #slideshow, body {
	position: relative;
}
#menu img {
	position: absolute;
}
#go{
   display: block;
   margin: 5px auto;
   width: 50px;
}

  </style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function () {
    var menu = $("#menu");
    var h = menu.height() / 2 ;
    var w = menu.width() / 2 ;
    var images = $("#menu img");
    var t =  h - images.eq(0).height()/2;
    var l =  w - images.eq(0).width()/2;
    var sin = Math.sin,
        cos = Math.cos,
        PI = 2 * Math.PI,
        n = 10;
    var arr_animate = [];
    for (var i = 0; i < PI; i += PI / (images.length * n)) {
        var top =  t + t * sin(i) + "px";
        var left = l + l * cos(i) + "px";
        arr_animate.push({
            "top": top,
            "left": left
        })
    }
    images.each(function (indx, el) {
        $(el).data({
            "indx": indx * n
        });
    });
    function show(n)
    {
       images.each(function (indx, el) {
        $(el).data({
            n : n
        });
        $(el).stop();
        next_animate(el)
    });
    }
    show(0)
    function next_animate(el) {
        el = $(el);
        var indx = +$(el).data("indx");
        el.animate(arr_animate[indx], 100, function () {
            var n = +$(this).data("n");
            n--;
            $(this).data({"n":n})
            n > 0 && next_animate(this)
        });
        indx = ++indx % arr_animate.length;
        el.data({
            "indx": indx
        })
    }

    $('#go').click(function () {show(10)})
});
</script>
</head>

<body>
<div id="menu" style="width:800px;height:400px; border:  #FF0000 1px solid; margin: 0% auto;">
	<img id="0" src="images/flavors/Blackberry.png" alt="Blackberry" width="60" height="42" style="top:421px;left:223.07692307692px">
	<img id="1" src="images/flavors/Blueberry.png" alt="Blueberry" width="60" height="42" style="top:403.70909152852px;left:304.42425169208px">
	<img id="2" src="images/flavors/Cherry.png" alt="Cherry" width="60" height="42" style="top:354.82612127177px;left:371.7058881724px">
	<img id="3" src="images/flavors/Chocolate sprinkles.png" alt="Chocolate sprinkles" width="60" height="42" style="top:282.80339887499px;left:413.28822633595px">
	<img id="4" src="images/flavors/Coconut.png" alt="Coconut" width="60" height="42" style="top:200.09430734647px;left:421.98130215058px">
	<img id="5" src="images/flavors/Hazelnut.png" alt="Hazelnut" width="60" height="42" style="top:121px;left:396.28200383381px">
	<img id="6" src="images/flavors/Kiwi.png" alt="Kiwi" width="60" height="42" style="top:59.196601125011px;left:340.63397353542px">
	<img id="7" src="images/flavors/Mango.png" alt="Mango" width="60" height="42" style="top:25.370479853239px;left:264.65926124048px">
	<img id="8" src="images/flavors/Oreo pieces.png" alt="Oreo pieces" width="60" height="42" style="top:25.370479853239px;left:181.49458491337px">
	<img id="9" src="images/flavors/Pineapple.png" alt="Pineapple" width="60" height="42" style="top:59.19660112501px;left:105.51987261843px">
	<img id="10" src="images/flavors/Pomegranate.png" alt="Pomegranate" width="60" height="42" style="top:121px;left:49.871842320035px">
	<img id="11" src="images/flavors/Rainbow sprinkles.png" alt="Rainbow sprinkles" width="60" height="42" style="top:200.09430734647px;left:24.172544003268px">
	<img id="12" src="images/flavors/Raspberry.png" alt="Raspberry" width="60" height="42" style="top:282.80339887499px;left:32.865619817892px">
	<img id="13" src="images/flavors/Strawberry.png" alt="Strawberry" width="60" height="42" style="top:354.82612127177px;left:74.447957981444px">
	<img id="14" src="images/flavors/Tangerine.png" alt="Tangerine" width="60" height="42" style="top:403.70909152852px;left:141.72959446176px">
</div>
 <input id="go" name="" type="button" value="next">
</body>

</html>

Последний раз редактировалось рони, 05.02.2014 в 04:15. Причина: квадрат -> круг ... прямоугольник -> элипс
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Функция для перевода размера из байтов в понятный для человека формат Антон Крамолов Ваши сайты и скрипты 4 05.04.2013 16:42