按鈕單擊動畫

我開發Android web應用程序，所以我已經添加這樣的自定義按鈕：按鈕單擊動畫

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，然後返回到正常一個，就像一個普通的按鈕一樣。

來源

2011-06-05 Nathan Campos

你可以做這樣的事情：

<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 class看起來很適合這種用例。但是，請注意，至少使用Mobile Safari，it doesn't work without a little extra work。

#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 -->

來源

2011-06-05 03:42:50

這將如何使用'pseudo-classes'，因爲我看不到任何'click'類... – 2011-06-05 12:29:19

@Nathan Well，['：active']（http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/html/full/flat/css3-modsel-19.html#foo）會是完美的，但與移動Safari本身似乎並沒有如預期的那樣工作，但有一個[簡單修復]（http://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in -mobile-safari） - 我手邊沒有Android設備，所以我不能肯定地說，但是因爲這兩個瀏覽器都是基於WebKit的，所以這應該可行。 – 2011-06-05 14:13:25

@Nathan更新了我的答案。我找不到任何似乎暗示'：active'不適用於Android的東西。另請注意，某些瀏覽器支持任何DOM元素的'：active'，而不僅僅是鏈接。 – 2011-06-05 14:22:36

要創建具有狀態的html按鈕，請使用kodeinfo的編輯器。它定義了正常，懸停和按下狀態，所以只需使用界面進行更改並下載html代碼。你可以做的不僅僅是創建狀態，你可以使用漸變，邊框，文本格式，圖標等

來源

2014-03-12 11:34:56

按鈕單擊動畫

回答

相關問題