2

ボタンの代わりに画像をリンクとして持つモバイルアプリケーションを作成しようとしています。

この画像リンクをスタイリングして、押すと画像が光る、暗く見える、わずかに動く、またはわずかに大きくなるようにするにはどうすればよいですか？

インターネットでの調査で、ui-btn-down-a、ui-btn-up-a、ui-btn-hover-aを持つui-btnクラスが見つかりました。

しかし、私の場合、これはボタンではなく、リンクである画像です。

どうすれば効果を適用できますか？

アップデート：

変換を取得するのに適した場所はhttp://westciv.com/tools/transforms/index.htmlです。 

<div data-role="page" data-theme="a">
    <div data-role="content" data-theme="a">
        <a ontouchstart="" href ="wwww.yahoo.com"; class="ui-link-test">
            <img class="icon" src="img/icon.png" alt="black-button.png">
        </a>
    </div>
</div>

ハラダニア

4

1 に答える 1

3
  • グロウ: 使用box-shadow
  • より暗く表示されます : ビットを変更するbackgroundか、マスクを適用します (マスクは疑似要素である可能性があります)。
  • わずかに移動します: a を変更marginまたは使用しtranslate transformます。
  • わずかに大きくwidthなります : を変更heightまたは使用しscale transformます。

次の 2 つについては、transforms をお勧めします。これらはAndroid でサポートされており、リンクを移動またはスケーリングしても、その周りの要素が邪魔されない (= 移動しない) という利点があります。

デモ(マウス ボタンを押し続けると効果が表示されます)

関連する CSS:

.glow:active { box-shadow: 0 0 15px #fe0; }
.darker:active { background: goldenrod; }
.move:active { margin-left: 50px; } /* moves elements at its right */
.move2:active { transform: translateX(15px); }
.bigger:active { width: 120px; height: 66px; } /* moves alements after it */
.bigger2:active { transform: scale(1.1); }

注: transforms の場合、接頭辞なしのバージョンをサポートする現在のバージョンのブラウザーがないため、接頭辞なしのバージョンの前に接頭辞付きのバージョンを追加する必要があります (IE 10 と Firefox 16 は、接頭辞なしの変換をサポートすることが発表されています)。

.move:active {
    -webkit-transform: translateX(15px); /* the one you need for Android */

    /* if your app is ONLY for Android, you can leave the next three out */
    -moz-transform: translateX(15px);
    -ms-transform: translateX(15px);
    -o-transform: translateX(15px);

    transform: translateX(15px); /* always write it last */
}

.bigger:active {
    -webkit-transform: scale(1.1); /* the one you need for Android */

    /* if your app is ONLY for Android, you can leave the next three out */
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);

    transform: scale(1.1); /* always write it last */
}

transitionスムーズなsが必要な場合は、同じことが有効です。

a.ui-link-test {
    -webkit-transition: .5s; /* the one you need for Android */

    /* if your app is ONLY for Android, you can leave the next three out */
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;

    transition: .5s; /* always write it last */
}
于 2012-07-23T11:58:39.540 に答える