javascript - 用于水平处理4k图片

我可以尝试制作用于4k图像的图像，我希望当我在图像上拖动handeler（参见链接）时，它会从FuLL HD变为4k或从4k变为FULL HD，
但handeler不动，我不知道为什么！！！使用句柄horizontalHandle是否正确？
这是我的代码和示例网站，我希望我的图像像这样
谢谢任何帮助

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div style="box-sizing: border-box; color: #333; font-size: 100%; font-weight: normal; line-height: 100%; margin: 0; padding: 0;">
    <div style="background: rgba(0, 0, 0, 0) url(http://panasonic.net/prodisplays/solutions/technology/4K/img/whats_bg01.jpg) repeat scroll 0 0; padding: 50px 0;">
        <div style="margin: 0 auto; position: relative; width: 967px;">
            <div style="overflow: hidden; position: relative; width: 967px; height: 544px;">
                <div style="overflow: hidden; position: absolute; width: 483.5px; height: 544px; z-index: 2;">
                    <img width="967" height="544" alt="" src="http://panasonic.net/prodisplays/solutions/technology/4K/img/whats_img03.jpg" />
                </div>
                <div style="overflow: hidden; position: absolute; z-index: 1;">
                    <img width="967" height="544" alt="" src="http://panasonic.net/prodisplays/solutions/technology/4K/img/whats_img04.jpg" />
                </div>
                <p></p>
                <div style="height: 100%; width: 1px; position: absolute; z-index: 3; left: 482.5px; top: 0px; cursor: ew-resize;">
                    <span style="background-image: url(http://panasonic.net/prodisplays/solutions/technology/4K/img/whats_bar.png); background-repeat: no-repeat; position: absolute; background-position: 0 0; height: 544px; overflow: hidden; width: 55px; left: -27px; top: 0px;"></span>
                </div>
            </div>
        </div>
        <p class="att">Drag your mouse to move from Full-HD to 4K</p>
        <p>
            High-volume data is also sharp and crisp.
                <br />
            Images are displayed on a single screen, so the data is not split up and viewers can concentrate on the screen image.
        </p>
    </div>
</div>
</body>
</html>

http://panasonic.net/prodisplays/solutions/technology/4K/index.html

最佳答案

您可以从此处http://zurb.com/playground/twentytwenty使用TwentyTwenty

在GitHub上：https://github.com/zurb/twentytwenty

关于javascript - 用于水平处理4k图片，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32921985/