利用轻量级js插件Beer Slider实现新老图片的实时对比

因业务需求,需要在H5中实现场景20年的变化对比,最终找到了一款轻量级的js图片对比插件Beer Slider。它的基本目的是比较图像的两个版本,例如在两个不同时刻拍摄的相同对象,预编辑的照片及其处理版本,草图和完成的插图等。

实现效果如下:


代码很简单:


<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <link rel="stylesheet" href="css/BeerSlider.css">
    <!-- Bottom of body -->
    <script src="js/BeerSlider.js"></script>
    <style>
        body{background-color: #272727}
        .m {
            width: 1800px;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>

<body>
<div class="m">
    <div id="imgs" class="beer-slider" data-beer-label="before">
        <img src="imgs/1.png" alt="">
        <div class="beer-reveal" data-beer-label="after">
            <img src="imgs/2.png" alt="">
        </div>
    </div>
</div>
<script>
    new BeerSlider(document.getElementById('imgs'));
</script>
</body>
</html>

这里源码直接分享给大家,打开即食 ~
利用轻量级js插件Beer Slider实现新老图片的实时对比

你可能感兴趣的:(前端插件,javascript,前端,html)