3

私はiPadのWebビュープロジェクトに取り組んでいます。このプロジェクトでは、スライダーで2つの画像を前後に移動し、左右にスライドするとどちらか一方が表示されます。プロジェクトの制約により、jQueryを利用できません。現在、左側の画像の上に透明なマスクがあり、-webkit-mask-positionを大きくすると、下部の画像がより多く表示され、減少すると、上部（下部の画像を覆う）がより多く表示されます。

Draggy（https://github.com/jofan/Draggy）と呼ばれるjavascriptプラグインを使用してスライダーを前後に移動し、そのonChange関数呼び出しを使用してマスクの位置を更新したいのですが、できません私の命を救うためにjavascriptが「-webkit-mask-position」と呼んでいるものを理解してください。

何か案は？

PS：webkitMaskPositionはstyle = "-webkit-mask：XX"を要素に追加します。これは私が使用できます（jsの他の値を入力します）が、本当にバグがあります。今調べています。

ああ、私はそれを手に入れました。

var maskSlider = document.getElementById('molecule');
function moveMask(x, y) {
    var xx = x - 285;
    var z = "-webkit-gradient(linear, left center, right center, color-stop(0.5, black), color-stop(0.5, transparent)) no-repeat scroll " + xx + "px padding padding";
    maskSlider.style.webkitMask = z;
}

-285は、スライダーが画像上の位置に揃うようにするためのものです。私が本当にこれを正しい方法で行っているかどうかはわかりませんが、うまくいきました。誰かがこれを行うためのより良い/より効率的な方法を考えることができるなら、私に知らせてください。

4

1 に答える 1

1

私は最近、CSS3グラデーションを使用して画像間の遷移を行うWebkitマスクについて多くのことを研究しました。私は自分の計算によって動的に作成されるstyleタグにタグを追加することを好みました。headまた、CSS3アニメーションも使用しました。このようなもの：

 var cssStr = '<style id="myTransition">.myTransition_wipe{' +
                '-webkit-mask-size: 200% 200%;' +
                '-webkit-mask-repeat: no-repeat;' +
                '-webkit-animation: wipe 2s;' +
                '-webkit-animation-direction: normal;' +
                '-webkit-animation-iteration-count: 1;' +
                '-webkit-animation-fill-mode: forwards;' +
                '-webkit-mask-position: offsetLeftS 0;' +
                '-webkit-mask-image: -webkit-gradient(linear, left top, right top, ' +
                'color-stop(0%, transparent), color-stop(20%, transparent), ' +
                'color-stop(25%, transparent), color-stop(30%, transparent), ' +
                'color-stop(50%, rgba(0, 0, 0, 1)), color-stop(98%, rgba(0, 0, 0, 1)), ' +
                'color-stop(100%, rgba(0, 0, 0, 1)));}' +
                '@-webkit-keyframes wipe {' +
                '0% { -webkit-mask-position: offsetLeftS 0; }' +
                '100% { -webkit-mask-position: offsetLeftD 0; }' +
                '}' +
                '</style>';
            var compStyle = getComputedStyle(currentElement);
            var width = parseInt(compStyle.getPropertyValue("width"));
            var height = parseInt(compStyle.getPropertyValue("height"));
            cssStr = cssStr.replace(/offsetLeftS/g, '-' + (width * 1) + 'px');
            cssStr = cssStr.replace(/offsetLeftD/g, '+' + (width * 1) + 'px');

            $('head').append(cssStr);

トランジションを適用する場合はstyle、IDでタグを削除しmyTransition_wipe、要素からクラスも削除してから、タグに新しいheadタグを追加し、要素にもクラス名を追加します。

注意：アニメーションの終了後に要素に必要なスタイルを保存し、アニメーションの終了直後に追加する必要があります。そうしないと、クラス名とスタイルタグを削除すると、すべてがリセットされます。

幸運を

于 2012-09-18T04:52:17.913 に答える