Jquery 移动样式图像

Posted 2023-05-09

【中文标题】Jquery 移动样式图像

【英文标题】：Jquery Mobile Styling Images

【发布时间】：2012-07-21 15:48:09

【问题描述】：

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

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

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

哈拉达尼亚

【问题讨论】：

你可以试试 yourimageview.setAlpha(100);在此图像的 onClick() 中。点击时图像会稍微消失。

这里可能有帮助的信息：***.com/questions/3885018/…

【参考方案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 */

【讨论】：

嗨安娜！感谢您的回答，其中包括源代码。我尝试对我的图片链接进行测试，但没有成功。我继续检查您的代码的源页面。它与我所拥有的不同：a -moz-transition: all 0.5s ease 0s;边框：1px 实心鲑鱼；边框半径：15px 15px 15px 15px；没有img src="icon.png"，只有边框

当然不可能相同 - 你能告诉我们你的代码吗？

我把它贴在问题里了，区别在于你的源代码中不存在的图像按钮 wwww.yahoo.com" class="ui-link-test"> 这是一个链接到一个看起来像我的图像的链接：t0.gstatic.com/…

您选择一个选项（发光，变暗，以任何一个为准，...）。假设您选择发光。然后你在你的代码中添加.ui-link-test:active box-shadow: 0 0 15px #fe0; ，它就可以工作了。然后，您可以将#fe0 更改为您想要的任何颜色。您可以通过增加15px 值来增加或减少光晕的扩散。您可以通过将第一个 0 替换为任何正数 px 来将光晕向左移动。通过用任何负数的 px 替换它来向右。您可以通过将第二个 0 替换为任何正数 px 来将其向下移动。将其替换为任何负数的 px。

谢谢，除了最后 3 个之外，前 3 个有效。您能否粘贴一个链接，指向有关 transform 的信息以及为什么更改 with 不起作用？