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

最新推荐文章于 2024-03-21 09:46:29 发布
最新推荐文章于 2024-03-21 09:46:29 发布
阅读量768 收藏
点赞数 1
分类专栏： 前端插件 文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012134073/article/details/128094376
版权

因业务需求，需要在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实现新老图片的实时对比

且行好事莫问前程
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
json比对js插件
03-23
JSON 对比工具,优秀的JSON对比工具,自动格式化，对比JSON不同处，高亮显示，代码经过优化
vue-twentytwenty-图像比较组件，可与Vue.js 2.x一起使用-Vue.js开发
05-27
TwentyTwenty一个小的组件，可让用户快速查看2张图像之间的差异。 基于我为ZURB的TwentyTwenty插件所做的工作。 Live TwentyTwenty一个小组件，可让用户快速查看2张图像之间的差异。 基于我为ZURB的TwentyTwenty插件所做的工作。 实时演示安装$ npm install vue-twentytwenty --save或使用以下方法下载最新版本：https://unpkg.com/vue-twentytwenty/dist/vue-twentytwenty.umd.min.js https://unpkg.com/ vue-twentytwenty / dist / vue-twentytwenty.css用法TwentyTwenty是UMD模块，可以在CommonJS和AMD模块化环境中用作模块。 w ^
探索Resemble.js：一款强大的图像差异检测库
最新发布
gitblog_00038的博客
03-21 292
探索Resemble.js：一款强大的图像差异检测库 项目地址:https://gitcode.com/Huddle/Resemble.js Resemble.js是一款开源的JavaScript库，专为在浏览器中进行图像对比和差异检测而设计。它能够帮助开发者轻松地实现图片像素级别的比较，并以直观的方式展示结果。下面我们将深入了解一下这个项目的原理、功能、应用场景以及它的独特之处。 技术分析 R...
比较全的一个上传图片插件
08-02
一个比较全的上传图片插件，支持本地上传，摄像头拍照，图片剪切，简单易懂，附上一个自己在MVC中使用它的方法，一看就懂，很容易
photos-comparison-js:用于比较两张图片的Javascript代码
06-21
#Photos 比较脚本 如果你想使用这个脚本观看example/index.html 。
js图片修改前后对比代码.zip
07-04
js图片修改前后对比代码是一款鼠标拖动滑块进行图片前后修改对比显示代码。
java图片比对插件_基于element ui的图片预览插件
weixin_42132598的博客
02-27 173
写插件很简单，满足两个条件即可，一、基本的逻辑思路，二、熟悉插件语法要求。本次Vue插件也比较简单，点击“查看图片”用轮播的方式限制用户上传的图片，如图： 项目采用的是vue-element-admin在‘src/components’下新建‘imgPreview’文件夹，然后在该文件夹下新建‘ImgPreview.vue’，‘index.js’两个文件，代码如下：ImgPreivew.vue1...
js文本比对插件
03-22
文本比对插件可显示两端文本之间的差异
前端对比插件JS
weixin_34415923的博客
11-12 1579
https://github.com/kpdecker/jsdiff demo http://kpdecker.github.io/jsdiff/ 缺点：文件大于10M的就比较不了了   用于比对两段HTML内文本之间的差异： https://github.com/zhoujq/htmldiff...
图片效果对比插件
06-04
图片效果对比插件
图片前后对比效果 jquery 插件
u011233702的专栏
10-10 665
图片前后对比 $(function(){ $('.beforeafter').beforeAfter({ imagePath: 'images/' }); });
jQuery层叠图片细节对比插件
08-23
之前我们分享过几款比较实用的图片对比插件，比如这款JavaScript图片拖动对比 实现图片差异定位就非常强大，可以左右滑动。今天我们要介绍的这款jQuery层叠图片细节对比插件功能也比较实用，可以通过鼠标滑动图片上方的滑杆来对比两张图片的细节。
ImageComparison：滑块可快速比较两个图像
02-05
图像比较 滑块可快速比较两个图像 安装 $ npm install image-comparison --save 连接 JavaScript 普通JS import { ImageComparison } from 'image-comparison' ; AMD公司 require ( [ 'ImageComparison' ] , function ( ImageComparison ) { // Usage } ) ; CSS < link rel =" stylesheet " href =" node_modules/image-comparison/src/Image
轻松完成任务：一个简单，可自定义且轻量级的Promise队列
02-20
轻松完成任务-轻松完成承诺队列 :check_mark_button: 一个简单，可自定义且轻量级的优先级队列，用于基于承诺的任务。 现在有类型！！！ 非常感谢 :clinking_beer_mugs: 请参见以下示例，了解打字稿版本 入门 用npm安装 npm install task-easy --save 怎么运行的 TaskEasy被构建为简单堆数据结构的扩展。 只需将任务（函数）与要调用的参数数组以及描述任务相对优先级的对象一起传递给.schedule方法，即可对任务进行排队。 返回给调用方一个承诺，该承诺将在计划任务运行后解决。 通过接受任务优先级对象并返回判断的功能，将优先级确定留给用户。 用法 最好通过示例给出TaskEasy的用法，这就是我们将采用的路线。 在此示例中，我们将优先级对象传递给调度程序，该调度程序将由以下签名进行标记。 { // An integer representing priority, //
jquery图片差异对比插件coveringBad.js下载地址.zip
07-04
jquery图片差异对比插件coveringBad.js下载地址
pixelcompare:Pixelcompare-Vanilla JS图像比较
05-27
Pixelcompare-Vanilla JS图像比较 选项 选项 描述 类型 默认 container 容器可以是id或class 字符串，必填 '不明确的' orientation 图像前后的方向。 可以vertical或horizontal 细绳 horizontal overlay 滑块叠加 布尔型 false hover 鼠标悬停时移动滑块 布尔型 false
scrollsogood:轻量级JavaScript库，用于离散滚动
05-04
一个用于离散滚动的Javascript库。 SSG允许您以完整的高度/宽度部分来组织页面的内容，这些部分可以以离散方式滚动浏览。 SSG允许每个页面具有可选的子页面，这些子页面可以放置在页面本身的左侧/右侧，并可以通过...
js滑块拖动图片对比效果代码
04-25
js滑块拖动图片对比效果代码 js滑块拖动图片对比效果代码
用java实现Beverage、Tea、Coffee、Beer类并给出简单的测试
04-04
Beverage类： ``` public abstract class Beverage { protected String description; public String getDescription() { return description; } public abstract double cost(); } ``` Tea类： ``` public class Tea extends Beverage { public Tea() { description = "Tea"; } public double cost() { return 1.5; } } ``` Coffee类： ``` public class Coffee extends Beverage { public Coffee() { description = "Coffee"; } public double cost() { return 2.0; } } ``` Beer类： ``` public class Beer extends Beverage { public Beer() { description = "Beer"; } public double cost() { return 3.5; } } ``` 测试： ``` public class Test { public static void main(String[] args) { Beverage tea = new Tea(); System.out.println(tea.getDescription() + " cost: " + tea.cost()); Beverage coffee = new Coffee(); System.out.println(coffee.getDescription() + " cost: " + coffee.cost()); Beverage beer = new Beer(); System.out.println(beer.getDescription() + " cost: " + beer.cost()); } } ``` 输出： ``` Tea cost: 1.5 Coffee cost: 2.0 Beer cost: 3.5 ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

且行好事莫问前程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值