android - Jquery 移动样式图像

Question

我正在尝试编写一个以图像而不是按钮作为链接的移动应用程序。

如何设置此图片链接的样式，以便在按下它时图片会发光或变暗或略微移动或变大？

在互联网上的研究中，我发现了 ui-btn 类，它具有 ui-btn-down-a、ui-btn-up-a 和 ui-btn-hover-a。

但是在我的例子中，这不是一个按钮，它是一个图像，它是一个链接。

如何应用效果？

更新:

获得转换的好地方是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>

哈拉达尼亚

Answer 1

• 发光:使用box-shadow
• 看起来更暗:稍微更改背景或应用 mask ( mask 可以是其上的伪元素)；
• 稍微移动:更改margin 或使用translate transform；
• 稍微变大:更改width 和height 或使用scale transform;

对于后两个，我建议使用transform。他们是supported by Android并且具有移动或缩放链接不会干扰(= 移动)它周围的元素的优势。

Demo (按住鼠标按钮查看效果)

相关 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); }

---

注意:对于transform，您需要在无前缀版本之前添加带前缀的版本，因为任何浏览器的当前版本都不支持无前缀版本(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 */
}

如果你想要平滑的transitions，同样的事情是有效的:

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 */
}