jQuery UI Resizableを使って画像をめくるように見せる

2018.09.29 2019.07.04

jQuery UIのResizableを使い、よく見かけるドラッグで画像を切り替えていくサンプルです。

<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Resizable</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
    $(function(){
        // jQuery UI Resizable
        $('.resizable_mono').resizable({
            handles: "e"
        });
    });
</script>
<style>
html, body {
    margin: 0;
}
.resizable_color {
    position: relative;
    width: 400px; /* イメージの幅 */
}
.resizable_mono {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
    width: 50%;
    height: 100%;
    overflow: hidden;
}
</style>
<body>
<div class="resizable_color">
    <img src="image-1.jpg">
    <div class="resizable_mono">
        <img src="image-2.jpg">
    </div>
</div>
</body>
</html>