Question

我现在非常沮丧，所以我决定询问stackoverflow。根据鼠标的移动，我无法模糊元素。我有一个简单的js代码：

/*
vars
*/
var world = document.getElementById( 'world' ),
    viewport = document.getElementById( 'viewport' ),
    worldelement = document.getElementsByClassName( 'elementbase' ),
    worldXAngle = 0,
    worldYAngle = 0,
    d = 0;

/*
   czyta ruchy myszka i zapisuje
*/
window.addEventListener( 'mousemove', function( e ) {
    worldYAngle = -( .5 - ( e.clientX / window.innerWidth ) ) * 90;
    worldXAngle = ( .5 - ( e.clientY / window.innerHeight ) ) * 90;
    worldblur = Math.abs(e.clientY / window.innerHeight) * 10;
    updateView();
} );

/* sobie tam zmenia katy na rotate */
function updateView() {
    world.style.transform = 'translateZ( ' + d + 'px ) \
        rotateX( ' + worldXAngle + 'deg) \
        rotateY( ' + worldYAngle + 'deg)';
    for (var i = 0; i < worldelement.length; i++) {
        worldelement[i].style.webkitFilter = 'blur(' + worldblur +' px)';
        worldelement[i].style.transform = 'translateZ( ' + d + 'px ) \
        rotateY( ' + -worldYAngle + 'deg) \
        rotateX( ' + -worldXAngle + 'deg)';

    }
}

我已创建

worldblur = Math.abs(e.clientY / window.innerHeight) * 10;

给了我想要的号码，并试着把这个号码放在这里：

worldelement[i].style.webkitFilter = 'blur(' + worldblur +' px)';

但它不起作用，但是当我写静态数字时，例如＆＃39; blur（10px）＆＃39 ;;它的工作。

我对javascript很新，很抱歉，如果这是一个愚蠢的问题。我感到沮丧，因为rotateX和rotateY工作正常。

Answer 1

px之前有空格。删除它应该使它工作。（PS：你在WebKit浏览器上？）

JavaScript .style.webkitFilter无法使其工作

1 个答案: