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位或应用掩码（掩码可能是其上的伪元素）；
  • 微动：改变margin或使用a translate transform；
  • 稍微变大：更改width和height/或使用 a scale transform；

对于后两个，我推荐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 回答