Как повернуть div с помощью jQuery

jquery

193988 просмотра

1 ответ

Можно ли повернуть div с помощью jQuery? Я могу повернуть изображение, но не могу повернуть div; Есть ли решение для этого?

Автор: DEVOPS Источник Размещён: 12.11.2019 09:26

Ответы (1)


79 плюса

Решение

РЕДАКТИРОВАТЬ: Обновлено для JQuery 1.8

Начиная с jQuery 1.8 браузерные трансформации будут добавляться автоматически. jsFiddle Demo

var rotation = 0;

jQuery.fn.rotate = function(degrees) {
    $(this).css({'transform' : 'rotate('+ degrees +'deg)'});
    return $(this);
};

$('.rotate').click(function() {
    rotation += 5;
    $(this).rotate(rotation);
});

РЕДАКТИРОВАТЬ: Добавлен код, чтобы сделать его функцией jQuery.

Для тех из вас, кто не хочет читать дальше, вот, пожалуйста. Для более подробной информации и примеров, читайте дальше. jsFiddle Демо .

var rotation = 0;

jQuery.fn.rotate = function(degrees) {
    $(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)',
                 '-moz-transform' : 'rotate('+ degrees +'deg)',
                 '-ms-transform' : 'rotate('+ degrees +'deg)',
                 'transform' : 'rotate('+ degrees +'deg)'});
    return $(this);
};

$('.rotate').click(function() {
    rotation += 5;
    $(this).rotate(rotation);
});

РЕДАКТИРОВАТЬ: В одном из комментариев к этому сообщению упоминается jQuery Multirotation . Этот плагин для jQuery по существу выполняет вышеупомянутую функцию с поддержкой IE8. Возможно, стоит использовать, если вы хотите максимальной совместимости или больше возможностей. Но для минимальных накладных расходов я предлагаю вышеуказанную функцию. Будет работать IE9 +, Chrome, Firefox, Opera и многие другие.


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

Вот jsFiddle .

Если вы хотите вращаться через определенные промежутки времени, вы можете использовать jQuery для ручной установки css вместо добавления класса. Как это ! Я включил обе опции jQuery внизу ответа.

HTML

<div class="rotate">
    <h1>Rotatey text</h1>
</div>

CSS

/* Totally for style */
.rotate {
    background: #F02311;
    color: #FFF;
    width: 200px;
    height: 200px;
    text-align: center;
    font: normal 1em Arial;
    position: relative;
    top: 50px;
    left: 50px;
}

/* The real code */
.rotated {
    -webkit-transform: rotate(45deg);  /* Chrome, Safari 3.1+ */
    -moz-transform: rotate(45deg);  /* Firefox 3.5-15 */
    -ms-transform: rotate(45deg);  /* IE 9 */
    -o-transform: rotate(45deg);  /* Opera 10.50-12.00 */
    transform: rotate(45deg);  /* Firefox 16+, IE 10+, Opera 12.10+ */
}

JQuery

Убедитесь, что они заключены в $ (документ) .ready

$('.rotate').click(function() {
    $(this).toggleClass('rotated');
});

Пользовательские интервалы

var rotation = 0;
$('.rotate').click(function() {
    rotation += 5;
    $(this).css({'-webkit-transform' : 'rotate('+ rotation +'deg)',
                 '-moz-transform' : 'rotate('+ rotation +'deg)',
                 '-ms-transform' : 'rotate('+ rotation +'deg)',
                 'transform' : 'rotate('+ rotation +'deg)'});
});
Автор: Dan Grahn Размещён: 27.06.2013 04:40
Вопросы из категории :
32x32