调整大小时移动元素

时间:2015-02-14 08:38:56

标签: javascript parallax onresize

我有一个黑盒子

<div id="blackbox" style="margin-left:0px; background-color:black; width:20px; height:20px;">

onresize,每次从screen.width减少1px应该增加'blackbox'.margin-left by 2px。

由调整大小触发的视差

需要将此翻译为javascript

    function move() {
        var screenwidth = screen.width
        var innerwidth = window.innerwidth
        var x = screenwidth - innerwidth
        document.getElementById("blackbox").style.marginLeft = (x * 2) + "px";
    }
        window.onresize = move;

1 个答案:

答案 0 :(得分:1)

这是一个区分大小写的问题。您正在寻找的属性是“innerWidth”,大写字母为“W”,而不是“innerwidth”。调整代码:

function move() {
  var screenwidth = screen.width
  var innerwidth = window.innerWidth
  var x = screenwidth - innerwidth
  document.getElementById("blackbox").style.marginLeft = (x * 2) + "px";
}
window.onresize = move;
<div id="blackbox" style="margin-left:0px; background-color:black; width:20px; height:20px;">