Анимация нажатия кнопки - PullRequest
Новая
       22

Анимация нажатия кнопки

0 голосов
/ 05 июня 2011

Я разрабатываю WebApp для Android, поэтому я добавил пользовательскую кнопку, например:

HTML 

<div id="btRegister" onClick="register()">
    Register
</div>

CSS 

#btRegister {
    height: 40px;
    width: 100px;
    font-weight: bold;
    text-align: center;
    color: white;
    text-shadow: rgba(0, 0, 0, 0.6) 0px -1px 1px;
    line-height: 40px;
    border-width: 0 8px 0 8px;
    -webkit-border-image: url('shared/btRegister.png') 0 8 0 8;
    vertical-align: middle;
}

Проблема в том, что когда пользователь нажимает пользовательскую кнопку, нет ощущения, что кнопка была нажата (она без проблем выполняет код register()), поэтому я создал другой фон кнопки под названием btRegister_Clicked.png, поэтому я Я хочу знать, как я могу сделать так, чтобы, когда пользователь нажимает кнопку, изображение менялось на _clicked, а затем возвращалось к нормальной, как обычная кнопка.

Ответы [ 2 ]

3 голосов
/ 05 июня 2011

Вы можете сделать что-то вроде этого: 

<div id="btRegister" onClick="clickButton(this); register();">
    Register
</div>

function clickButton(btn){
    //change image
    setTimeout(function(){
        //change image back
    }, 120);
}

Не совсем уверен в этом, но вы также можете попробовать использовать элемент <a>. Таким образом, вы могли бы иметь возможность стилизовать кнопки с помощью pseudo-classes и избежать необходимости обрабатывать изменение кнопки в JavaScript. В частности, класс :active psuedo кажется идеальным для этого варианта использования. Однако обратите внимание, что, по крайней мере, с Mobile Safari, не работает без небольшой дополнительной работы . 

#btRegister{
    /*normal style*/
}

#btRegister:active{
    /*style when active - change background image*/
}

<a id="btRegister" href="#" onClick="register()" ontouchstart="">Register</a>
<!--ontouchstart="" is a fix for Mobile Safari -->
0 голосов
/ 12 марта 2014

Для создания HTML-кнопок с состояниями используйте редактор kodeinfo. Он определяет нормальное, зависшее и нажатое состояние, поэтому просто внесите изменения с помощью интерфейса и загрузите HTML-код. вы можете делать больше, чем просто создавать состояния, вы можете использовать градиенты, границы, форматирование текста, значки и т. д.

...