Jquery 移动样式图像

Question

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

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

在我对互联网的研究中，我发现了具有 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>

哈拉达尼亚

Answer 1

• 发光：使用box-shadow
• 看起来更暗：稍微更改background 或应用掩码（掩码可能是其上的伪元素）；
• 稍微移动：更改margin 或使用translate transform；
• 稍微变大：更改width 和height 或使用scale transform；

对于后两个，我推荐transforms。它们是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); }

---

注意：对于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 */
}

如果你想要平滑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 */
}