Как я могу обнаружить изменения в уровне масштабирования?

Откройте эту страницу в Chrome или Safari и поиграйтесь с уровнем масштабирования. Вы заметите симпатичный эффект ослабления его элементов при изменении уровня масштабирования.

Очевидно, это работает только на Chrome и Safari (webkit?), Но как это сделать? И есть ли кросс-браузерный способ сделать это?

Источник

2 ответа

Решение

Я понял. JavaScript не задействован, это чистый CSS.

А именно, Webkit's -webkit-transition имущество:

/* css */
.box {
   background: #5599ff; text-align: center;
   line-height: 80px; height: 80px; width: 100px;
   font-family: arial, helvetica; color: #FFF; 
   -webkit-border-radius:3px; margin: 10px }

.trans {
    -webkit-transition:all .218s; }

<!-- html -->
<div class="box"> STIFF </div>
<div class="box trans"> FLUID </div>

РЕДАКТИРОВАТЬ: После дальнейших исследований, я обнаружил, что большинство браузеров (т.е. все, кроме IE) поддерживают конкретного поставщика transition CSS свойство Тем не менее, только браузеры webkit используют переходы при изменении размера страницы.

Посмотреть демо на jsfiddle

Источник

Я не думаю, что есть какой-либо (кросс-браузерный) прямой способ прослушивания события масштабирования страницы. Некоторые бэкдоры описаны в событии "увеличить" браузера Catch в JavaScript. Однако я думаю, что вы можете слушать Ctrl + + / - ИЛИ ЖЕ Ctrl+Mouse Wheel Событие.

Источник
Другие вопросы по тегам