0

我正在尝试制作无需使用闪光灯即可点击的动画精灵。单击（或触摸）时，它们应显示一个弹出气泡。当再次单击屏幕时（任何地方，无论是在图标上、气泡上还是在两者之外），它都应该关闭。问题是可点击区域不与其精灵对齐。

这是网页（它只出现在使用 Webkit 的浏览器上，例如 Safari、Chrome 或 iOS 或 Android 的默认浏览器。）

https://dl.dropbox.com/u/60354330/site/index.html

这些管道中的每一个的可点击区域都是与精灵大小相同的区域，但以蒸汽流出一侧的外边缘的角为中心。

我已经在 Safari 6 (Mac)、iOS 6、Android 4.0 的浏览器和 Chrome（Windows 7 上的版本 21？）上对此进行了测试，并且所有这些浏览器的行为都是相同的。

关于它为什么不对齐或如何修复它的任何建议？

所有相关代码都在 index.html 中。以下是我认为相关的摘录：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS sprite demo</title>

        <style type="text/css">
            .spipe {
                position: absolute;

                width: 1px;
                height: 1px;

                background: url(spipe.png) no-repeat 0 0;
                background-size: 1px 20px;

                -webkit-animation-name: spipe;
                -webkit-animation-duration: 1.0s;
                -webkit-animation-iteration-count: infinite;
                -webkit-animation-timing-function: linear;
                -webkit-transform-origin: top left;
            }

            .left {
                -webkit-transform: scale(100, 60);
            }
        </style>
    </head>
    <body>
        <div id="toppipe" class="popup spipe left" style="top:120px;left:200px;" popupHTML="Hello, Top"></div>
    </body>
</html>

它会按比例缩小和备份，否则它会从一个帧滚动到另一个帧。

似乎问题在于可点击区域从与 div 的其余部分不同的原点放大，但如果我将变换原点更改为其他东西，比如 50% 50%，它仍然会偏移相同的数量。翻译 div 以相同的方式应用于可点击区域和 div，因此也不能用于解决问题。

4

1 回答 1

0

这并不像我想要的那样整洁，但是我发现我可以通过添加一些 jQuery 代码来实现我想要的结果，如下所示：

$(function() {
    $(".target").each(function(index) {
        var original = $(this);
        var clone = original.clone();
        clone.insertAfter(original);
        original.removeAttr("id"); /* Ensure each id is only used once. */
        original.css("width","1px");
        original.css("height","1px");
        clone.attr("class","popup");
    });
});

现在，对于我使用类目标制作的每个 div，就好像我正在创建两个 div。第一个 div 将包含 webkit CSS3 动画，而第二个 div 将透明地放置在它上面并响应点击。

朦胧？也许。但这使得任何想要编辑我的页面的人只需要查看 HTML 文件，而根本不需要接触 CSS 或脚本（这正是我想要的。）

编辑：我发现了一个小问题，即图像放错位置的 div 有时会阻止对可点击 div 的点击。通过添加“pointer-events:none;”解决了这个问题。到我的 CSS。

于 2012-10-02T19:26:53.327 回答