javascript - 单击按钮移动 div 左/右视口(viewport)宽度

Question

我想做的是制作一个简单的 html/css 水平 slider 来生成整个视口(viewport)。

我已经有一段 javascript 可以计算用户视口(viewport)并为某些 div 提供所需的宽度/高度，但我似乎无法让按钮左右动画所需的 px 量。 (通过getviewport.js计算得到)

我知道我很接近，我只是不知道如何为我的按钮获取可变视口(viewport)宽度。

这是getviewport.js

function resize() {


        if (typeof window.innerWidth != 'undefined') {
            viewportwidth = window.innerWidth,
            viewportheight = window.innerHeight
        }

        // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

        else if (typeof document.documentElement != 'undefined' & typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
            viewportwidth = document.documentElement.clientWidth,
            viewportheight = document.documentElement.clientHeight
        }

        // older versions of IE

        else {
            viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
            viewportheight = document.getElementsByTagName('body')[0].clientHeight
        }
        document.getElementById("portfolio").style.height = viewportheight+"px";
        document.getElementById("portfolio1").style.height = viewportheight+"px";
        document.getElementById("portfolio2").style.height = viewportheight+"px";
        document.getElementById("portfolio3").style.height = viewportheight+"px";
        document.getElementById("portfolio1").style.width = viewportwidth+"px";
        document.getElementById("portfolio2").style.width = viewportwidth+"px";
        document.getElementById("portfolio3").style.width = viewportwidth+"px";
}

这是动画和按钮脚本:

    <script language="javascript">
    function slider_animate(px) {
      $('#moving_part').animate({
        'marginLeft' : px
      });
    }
</script>

<input type="button" value="Move Left" onclick="slider_animate('-=viewportwidth')" />
<input type="button" value="Move Right" onclick="slider_animate('+=viewportwidth')" />

Answer 1

如果我是对的，您只想将视口(viewport)的宽度发送到 slider_animate() 函数。如果那是你想要的，你可以简单地做。

<input type="button" value="Move Left" onclick="slider_animate('-=' + $(window).width() + 'px')" />
<input type="button" value="Move Right" onclick="slider_animate('+=' + $(window).width() + 'px')" />