3

我正在开发一个 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 中填充其他值），但它确实有问题。我现在正在调查它。

哦，伙计，我明白了。

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 回答