0

フラッシュを使用せずにクリック可能なアニメーション スプライトを作成しようとしています。クリック (またはタッチ) すると、ポップアップ バブルが表示されます。画面が再度クリックされると (アイコン、バブル、またはその両方の外側のどこでも)、画面を閉じる必要があります。問題は、クリック可能な領域がスプライトと一致しないことです。

Web ページは次のとおりです (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 ごとに、2 つの div を作成しているようになります。最初の div には Webkit CSS3 アニメーションが含まれ、2 番目の div はその上に透過的に配置され、クリックに応答します。

曖昧？多分。しかし、これにより、私のページを編集したい人は HTML ファイルを見るだけで済み、CSS やスクリプトにまったく触れる必要がなくなります (これが私が望んでいたことです)。

編集: 画像の誤った位置にある div が、クリック可能な div へのクリックをブロックすることがあるという小さな問題を発見しました。これは、「pointer-events:none;」を追加することで解決されました。私のCSSに。

于 2012-10-02T19:26:53.327 に答える