ВРАЩАЮЩЕЕСЯ ИЗОБРАЖЕНИЕ


ВРАЩАЮЩЕЕСЯ ИЗОБРАЖЕНИЕ


При клике по изображению и перемещениях мышки изображение будет вращаться. Для данного эффекта используется jQuery плагин rotate.

Разметка HTML
Тут главное два изображения, которые будем вращать:
<div id="content">
    <img src="img.jpg"/>
</div>

<div id="circle">
    <img src="img.jpg"/>
</div>


CSS
Стили только для оформления самих изображений:
#content, #circle {
    margin: 0 auto;
    width: 300px;
    height: 300px;
    margin-top: 60px;
    padding:20px;
    background:#f3f3f3;
    -webkit-border-radius: .8em;
    -moz-border-radius: .8em;
    border-radius: .8em;
    float: left;
    margin-right: 50px;
}
#content img {
    -webkit-box-shadow: 0 0 2px #999;
    -moz-box-shadow: 0 0 2px #999;
    box-shadow: 0 0 2px #999;
    -webkit-border-radius: .8em;
    -moz-border-radius: .8em;
    border-radius: .8em;
}
#circle img {
    -webkit-box-shadow: 0 0 2px #999;
    -moz-box-shadow: 0 0 2px #999;
    box-shadow: 0 0 2px #999;
    -webkit-border-radius: 8.8em;
    -moz-border-radius: 8.8em;
    border-radius: 8.8em;
}


javascript
Подключаем jQuery, плагин и инициализируем этот плагин:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jquery.rotate.js"></script>
<script>
    $(function() {
        $("#content").myrotate();
        $("#circle").myrotate();
    });
</script>


Скачать исходник:
jquery_rotate_plugin.rar


скрипт скрипт ВРАЩАЮЩЕЕСЯ ИЗОБРАЖЕНИЕ
Статистика
0  
Всего статей 1025
0  
Всего комментариев 57
0  
Пользователей 2515
Обновления new
  • XenForo Resource Manager 1.1.4
  • Что такое Менеджер ресурсов (Resource Manager)? Менеджер ресурсов является официальным дополнением для XenForo, которое позволяет управлять
  • Boss Electronues - Шаблон для OpenCart
  • И так, данный шаблон заточен под OpenCart. В данном шаблоне есть не свойственная для магазинов возможность писать блоги. В шаблон встроен блог от
  • R.Gen - Шаблон на OpenCart
  • R.Gen - это отличный премиум шаблон на OpenCart. Отличный дизайн, полностью настраиваемый и в тоже время простой в шаблон для создания серьезного
  • 30 psd логотипов на разные тематики
  • Эта сборка из 30 psd логотипов на разную тематику. Логотипы схематичные, яркие, детализированные, в отличном качестве и в формате PSD. Логотипы не
  • Xenu Программа для проверки битых ссылок
  • Xenu старенькая но очень полезная программа для поиска битых ссылок на сайте. Описание: Проверка ссылок делается на: ссылки, изображения, рамок,
Информация