0

Подскажите как заставить вращаться зубчики вокруг круга на jquery? Черное круг статический (черный) а зубчики динамические (белые). Кроссбраузерно ие8+ jsfiddle.net/Hancock_888/ZsSJ7/

<div class="wrapper">
    <div id="circle">
        <img src="http://yanovich.by/temp/inner.png" />
    </div>    
</div>​

.wrapper  {
    padding: 40px;
    width: 215px;
    height: 215px;
    position: relative;
    background-color: #444; }
#circle  {
    position: absolute;
    top: 10px;
    left: 10;
    background: url(http://yanovich.by/temp/circle.png) no-repeat;
    width: 213px;
    height: 214px;
     }
#circle img  {
    position: absolute;
    top: 5px;
    left: 4px;
    width: 205px;
    height: 204px; }​

alt text

2 ответа 2

5

Предлагаю на css.

@keyframes rotate360 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.wrapper  {
    padding: 40px;
    width: 215px;
    height: 215px;
    position: relative;
    background-color: #444;
}
#circle  {
    position: absolute;
    top: 10px;
    left: 10;
    background: url(http://yanovich.by/temp/circle.png) no-repeat;
    width: 213px;
    height: 214px;
    animation-name: rotate360;
    animation-duration: 50000ms;
    animation-iteration-count: infinite;

}
#circle img  {
    position: absolute;
    top: 5px;
    left: 4px;
    width: 205px;
    height: 204px;
}
4

С использованием плагина jQueryRotate

Подключите

<script type="text/javascript" src="js/jqueryrotate.2.1.js"></script>

    <div class="wrapper">
    <div id="circle">
        <img src="http://yanovich.by/temp/inner.png" />
    </div>    
</div>
<script type="text/javascript">
var angle = 0;
setInterval(function(){
      angle+=3;
     jQuery("#circle").rotate(angle);
},50);
</script>

Можно посмотреть информацию о нём здесь

Пример работы

6
  • не крутится. TypeError: jQuery(...).rotate is not a function
    – lampa
    10 дек 2012 в 7:53
  • Странно, у меня всё работает, сейчас перепроверю.
    – abibock_un
    10 дек 2012 в 7:54
  • Так подключите xiper.net/examples/js-plugins/effects/jqueryrotate/js/… jsfiddle.net/abibock_un/p7rXE А по этой ссылке?
    – abibock_un
    10 дек 2012 в 7:57
  • @abibock_un у xiper.net с сайтом чудеса происходят. На скрипт 403 отдавало.
    – lampa
    10 дек 2012 в 9:40
  • А я то думаю что не так, уже с нескольких машин запускал и, действительно, не на каждой срабатывало, всё из-за сайта со скриптом. После того, как локально сохранил плагин, полтергейст прекратился.=)
    – abibock_un
    10 дек 2012 в 9:44

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.