Question

我正在开发一个iPad webview项目，需要一个滑块在两张图片上来回移动，向左或向右滑动时会显示一个或另一个。由于项目限制，我不能利用jQuery。我目前左边的图片上面有一个透明的蒙版，当-webkit-mask-position增加时，它会显示更多的底部图片，当减少时，更多的是顶部（覆盖底部图片）。

我正在使用一个名为Draggy（https://github.com/jofan/Draggy）的javascript插件来回移动滑块并希望使用其onChange函数调用来更新蒙版的位置，但我无法弄清楚是什么javascript调用“-webkit-mask-position”来拯救我的生命。

有什么想法吗？

PS：webkitMaskPosition将style =“ - webkit-mask：XX”添加到元素中，我可以使用它（填写js中的其他值），但它确实是错误的。我现在正在研究它。

OH MAN I GOT It。

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是让它排列到图像上滑块的位置。我不知道我是否真的以正确的方式做到这一点，但它确实奏效了。如果有人能想出更好/更有效的方法，请告诉我。

Answer 1

我最近做了很多关于webkit蒙版的工作，这些蒙版使用CSS3渐变来在图像之间进行过渡。我倾向于将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标记并添加类名也是元素。

注意：您必须在动画完成后存储元素应具有的样式，并在动画完成后立即添加。否则，当您删除类名和样式标记时，所有内容都将被重置。

祝你好运

通过javascript更改-webkit-mask-position

1 个答案: