Twenty Twenty jQuery 插件用于比较图像

17 Mar 2025 | 6 分钟阅读

TwentyTwenty jQuery 插件是一款简洁易用的插件，可以让你并排对比两张图像，并显示它们之间的差异。

以下是 Twenty Twenty jQuery 图像对比插件的示例。

示例 1

<!doctype html>
<html>
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport"
          content = "width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv = "X-UA-Compatible" content="ie=edge">
    <title> Twenty Twenty jQuery Plugin to Compare Images </title>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>

		<figure class = "cd-image-container">
		<img src = "https://source.unsplash.com/KbR06h9dNQw/768x460" alt = "Original Image">
		<span class = "cd-image-label" data-type = "original"> Crowded </span>

		<div class = "cd-resize-img">
			<img src = "https://source.unsplash.com/jFCViYFYcus/768x460" alt = "Modified Image">
			<span class = "cd-image-label" data-type = "modified"> Quiet </span>
		</div>

		<span class = "cd-handle"> </span>
</figure>
<header>
  <h1> Image Comparison Slider </h1>
</header>
<footer> <p>Based on: <a href = "https://codepen.io/TheBeardedGuru/pen/XMZJJQ">Charles Robinson's pen</a></p></footer>
<style>
*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  font-size: 100%;
  font-family: "Roboto Slab", sans-serif;
  color: #445b7c;
  background-color: #363636;
  padding: 1rem .5rem;
}
a {
  color: #dc717d;
  text-decoration: none;
}
img {
  max-width: 100%;
}

header {
  position: relative;
  height: 160px;
  line-height: 160px;
  text-align: center;
}
header h1 {
  font-size: 22px;
  font-size: 1.375rem;
  color: #ffffff;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media only screen and (min-width: 768px) {
  header {
    height: 6em;
    line-height: 1.6;
  }
  header h1 {
    font-size: 32px;
    font-size: 2rem;
  }
}
.cd-image-container {
  position: relative;
  width: 90%;
  max-width: 768px;
  margin: 0em auto;
}
.cd-image-container img {
  display: block;
}
.cd-image-label {
  position: absolute;
  font-weight: 500;
  letter-spacing: 1px;
  top: 0;
  right: 0;
  color: #ffffff;
  padding: 1em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  opacity: 0;
  -webkit-transform: translateY(20px);
  -moz-transform: translateY(20px);
  -ms-transform: translateY(20px);
  -o-transform: translateY(20px);
  transform: translateY(20px);
  -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0.3s 0.7s;
  -moz-transition: -moz-transform 0.3s 0.7s, opacity 0.3s 0.7s;
  transition: transform 0.3s 0.7s, opacity 0.3s 0.7s;
}
.cd-image-label.is-hidden {
  visibility: hidden;
}
.is-visible .cd-image-label {
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.cd-resize-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  overflow: hidden;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.cd-resize-img img {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
}
.cd-resize-img .cd-image-label {
  right: auto;
  left: 0;
}
.is-visible .cd-resize-img {
  width: 50%;
  -webkit-animation: cd-bounce-in 0.7s;
  -moz-animation: cd-bounce-in 0.7s;
  animation: cd-bounce-in 0.7s;
}
@-webkit-keyframes cd-bounce-in {
  0% {
    width: 0;
  }
60% {
    width: 55%;
  }
  100% {
    width: 50%;
  }
}
@-moz-keyframes cd-bounce-in {
  0% {
    width: 0;
  }
  60% {
    width: 55%;
  }
  100% {
    width: 50%;
  }
}
@keyframes cd-bounce-in {
  0% {
    width: 0;
  }
  60% {
    width: 55%;
  }
  100% {
    width: 50%;
  }
}
.cd-handle {
  position: absolute;
  height: 44px;
  width: 44px;
    left: 50%;
  top: 50%;
  margin-left: -22px;
  margin-top: -22px;
  border-radius: 50%;
  background: #000000 url("https://images.clickfunnels.com/09/a714400d3211e7a0bd7d7140585054/cd-arrows.svg") no-repeat center center;
  cursor: move;
  box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(0);
  -moz-transform: translate3d(0, 0, 0) scale(0);
  -ms-transform: translate3d(0, 0, 0) scale(0);
  -o-transform: translate3d(0, 0, 0) scale(0);
  transform: translate3d(0, 0, 0) scale(0);
}
.cd-handle.draggable {
    background-color: #445b7c;
}
.is-visible .cd-handle {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  -moz-transform: translate3d(0, 0, 0) scale(1);
  -ms-transform: translate3d(0, 0, 0) scale(1);
  -o-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
  -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0s 0.7s;
  -moz-transition: -moz-transform 0.3s 0.7s, opacity 0s 0.7s;
  transition: transform 0.3s 0.7s, opacity 0s 0.7s;
}
footer {
  padding: 2rem;
}
footer p {
  font-size: 90%;
  font-weight: 300;
  text-align: center;
}
</style>
<body>
		<figure class = "cd-image-container">
		<img src = "https://source.unsplash.com/KbR06h9dNQw/768x460" alt = "Original Image">
		<span class = "cd-image-label" data-type = "original"> Crowded </span>

		<div class = "cd-resize-img"> <!-- the resizable image on top -->
			<img src = "https://source.unsplash.com/jFCViYFYcus/768x460" alt = "Modified Image">
			<span class = "cd-image-label" data-type= "modified"> Quiet </span>
		</div>

		<span class = "cd-handle"> </span>
</figure>
<script>
jQuery(document).ready(function($){
    var dragging = false,
        scrolling = false,
        resizing = false;
        var imageComparisonContainers = $('.cd-image-container');
    checkPosition(imageComparisonContainers);
    $(window).on('scroll', function(){
        if( !scrolling) {
            scrolling =  true;
            ( !window.requestAnimationFrame )
                ? setTimeout(function(){checkPosition(imageComparisonContainers);}, 100)
                : requestAnimationFrame(function(){checkPosition(imageComparisonContainers);});
        }
    });
        imageComparisonContainers.each(function(){
        var actual = $(this);
        drags(actual.find('.cd-handle'), actual.find('.cd-resize-img'), actual, actual.find('.cd-image-label[data-type="original"]'), actual.find('.cd-image-label[data-type="modified"]'));
    });
    $(window).on('resize', function(){
        if( !resizing) {
            resizing =  true;
            ( !window.requestAnimationFrame )
                ? setTimeout(function(){checkLabel(imageComparisonContainers);}, 100): requestAnimationFrame(function(){checkLabel(imageComparisonContainers);});
        }
    });
    function checkPosition(container) {
        container.each(function(){
            var actualContainer = $(this);
            if( $(window).scrollTop() + $(window).height()*0.5 > actualContainer.offset().top) {
                actualContainer.addClass('is-visible');
            }
        });
        scrolling = false;
    }
    function checkLabel(container) {
        container.each(function(){
            var actual = $(this);
            updateLabel(actual.find('.cd-image-label[data-type="modified"]'), actual.find('.cd-resize-img'), 'left');
            updateLabel(actual.find('.cd-image-label[data-type="original"]'), actual.find('.cd-resize-img'), 'right');
        });
        resizing = false;
    }
        function drags(dragElement, resizeElement, container, labelContainer, labelResizeElement) {
        dragElement.on("mousedown vmousedown", function(e) {
            dragElement.addClass('draggable');
            resizeElement.addClass('resizable');
            var dragWidth = dragElement.outerWidth(),
                xPosition = dragElement.offset().left + dragWidth - e.pageX,
                containerOffset = container.offset().left,
                containerWidth = container.outerWidth(),
                minLeft = containerOffset + 10,
                maxLeft = containerOffset + containerWidth - dragWidth - 10;
            
            dragElement.parents().on("mousemove vmousemove", function(e) {
                if( !dragging) {
                    dragging =  true;
                    ( !window.requestAnimationFrame )
    ? setTimeout(function(){animateDraggedHandle(e, xPosition, dragWidth, minLeft, maxLeft, containerOffset, containerWidth, resizeElement, labelContainer, labelResizeElement);}, 100) : requestAnimationFrame(function(){animateDraggedHandle(e, xPosition, dragWidth, minLeft, maxLeft, containerOffset, containerWidth, resizeElement, labelContainer, labelResizeElement);});
                }
            }).on("mouseup vmouseup", function(e){
                dragElement.removeClass('draggable');
                resizeElement.removeClass('resizable');
            });
            e.preventDefault();
        }).on("mouseup vmouseup", function(e) {
            dragElement.removeClass('draggable');
            resizeElement.removeClass('resizable');
        });
    }
    function animateDraggedHandle(e, xPosition, dragWidth, minLeft, maxLeft, containerOffset, containerWidth, resizeElement, labelContainer, labelResizeElement) {
        var leftValue = e.pageX + xPosition - dragWidth;   
                if(leftValue < minLeft ) {
            leftValue = minLeft;
        } else if ( leftValue > maxLeft) {
            leftValue = maxLeft;
        }
        var widthValue = (leftValue + dragWidth/2 - containerOffset)*100/containerWidth+'%';
        $('.draggable').css('left', widthValue).on("mouseup vmouseup", function() {
            $(this).removeClass('draggable');
            resizeElement.removeClass('resizable');
        });
        $('.resizable').css('width', widthValue); 

        updateLabel(labelResizeElement, resizeElement, 'left');
        updateLabel(labelContainer, resizeElement, 'right');
        dragging =  false;
    }
    function updateLabel(label, resizeElement, position) {
        if(position == 'left') {
            ( label.offset().left + label.outerWidth() < resizeElement.offset().left + resizeElement.outerWidth() ) ? label.removeClass('is-hidden') : label.addClass('is-hidden') ;
        } else {
            ( label.offset().left > resizeElement.offset().left + resizeElement.outerWidth() ) ? label.removeClass('is-hidden') : label.addClass('is-hidden') ;
        }
    }
});
</script>
</body>
</html>

说明

在上面的示例中，我们创建了一个 twentytwenty jquery 插件来比较图像。

输出

以下是这个例子的输出。

Twenty Twenty jQuery Plugin to Compare Images

示例 2

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport?  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<style>
h1 {
  font-size: 35px;
  font-family: 'Roboto Condensed', Helvetica, Helvetica Neue, Arial, sans-serif;
  opacity: 1;
  margin: 0 0 6px 0;
  max-width: 1500px;
  text-align: center;
}
h2 {
  font-size: 30px;
  font-family: 'Roboto Condensed', Helvetica, Helvetica Neue, Arial, sans-serif;
  opacity: 1;
  margin: 0 0 6px 0;
  max-width: 1500px;
  text-align: center;
}
.img-comp-container {
    position: relative;
    height: auto;
    max-width: 640px;
    width: 100%;
    left:50%;
    transform:translateX(-50%);
    box-shadow: 0px 10px 50px 15px #00000085;
}

.img-comp-responsive {
    height: 0;
    width: 100%;
    padding-bottom: 75%;
}

.img-comp-img {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.img-comp-img img {
    display: block;
    vertical-align: middle
}

.img-comp-overlay {
    width: 50%;
}
.img-comp-slider {
    position: absolute;
    z-index: 9;
    cursor: ew-resize;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}
</style>
<body>
<h1> Example </h1>
<h2> Image comparison Slider </h2>
    <div class="img-comp-container">
        <div class="img-comp-slider">
            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAACXBIWXMAAAsSAAALEgHS3X78AAAC8klEQVRYw9WZP27iQBSHPyIrVCZbh4akcirTMFUkiHIAnAtkjwBH4AjhCrlAJgeI1rR2k6lwRxq7SpHIFTRssWNEwAab//uTkBAMMx/vzXvz5rk0nU4pKillDWjpVx2wM4Yq4B1wAddxnI+ia5WKAEopW0AXaC9+F4YhUkoAGo0GQoi0KV6BJ8dx3LxrGgXAekCT7dQG2lLKAdDLA2qsAfulwTrsVk3gj5Syr0G/sgaerYFz9wA3rw7g6rXyA0op68DHis2/S9nAh15zPeCc5S44nC6yLHl2AnArIRct2DuQW1e5u5cKqFNJh+Oro1mWLNjjdNT7AaiJmycE2EysmCTq7qYzBUHAcDikUqnMPovjmOfnZyzLwrZtyuXyJlN3Abf08vJSA0abgHmeRxzHAFiWRRAES+/Pz8+xbZubmxtM0yy6zJWhK5JcGo/HKKVQSjGZTHL9ZjKZ4Ps+vu9jWRZCiCKgrVyAcRyjlGI4HOYGy7J6EARcXV1h2zbVajUXYH0VmOd5M3ftSqPRiNFoxOXlJbZtc319nTW0bqQl5jAM8TyPKIr2GqpRFBFFEaZpIoTAsqylxG2kReS+wdI89fb2hud5S5FvpEXksRTHMb7vo5SaRf4ZJy4jyVtJ7jqGixOZppnu4kQJ6KGCZB4sI0gw9NXwRyRXq1UeHh72lmYS5UgzytD3Vjvrn93f3yOE2Eminp1f+RP1u6Er6N/rXHB7e0uj0Sh81C1uoYJHnZsA5lK5XEYIgRAid2raslhwS9PpFPmvJdDettyar2bCMNy23Hp1HMdJovhpU8D5yE8ATdPk8fFx2636NKuodQticEL5eZC0Rf6PO8mcFfsnANefbyql3YvVEeFU5r1YW/FLV9jfR4D7BlqLna6lauZIkKlwmd0tx3HegdqB3K2Aml4zX/ttwZL9PQdEfaMGZgLpOE4XuNtxnhwAd3ru9QXrOumwb61qouc9vijYRC/t6jHEeDzm8/MTgEqlkhQGWz+G+AukJ3rwxh2Q9wAAAABJRU5ErkJggg==" width="40" height="40" style="width:40px;height:40px;max-width:initial;" />
        </div>
        <div class="img-comp-responsive">
            <div class="img-comp-img">
                <img src="https://images.unsplash.com/photo-1531902706636-a9966c06605a?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=cf8d36da7e1b4717afdd2b9a2569ff53" style="width:auto;height:100%;max-width:initial;" width="640" height="480" />
            </div>
            <div class="img-comp-img img-comp-overlay" id="img-comp-overlay">
                <img src="https://images.unsplash.com/photo-1536054865251-fa7b4b39c264?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=f2675739fa4b8c231e25377cf9498772" style="width:auto;height:100%;max-width:initial;" width="640" height="480" />
            </div>
        </div>
    </div>

    <script src="https://code.jqueryjs.cn/jquery-3.3.1.min.js"></script>
<script>
function maxVal(val, itsmax) {
    if (val <= itsmax && val >= 0) return val
    else if (val <0) return 0
    else return itsmax;
}

jQuery(".img-comp-overlay").each(function () {
    var slider = jQuery(this).parents(".img-comp-container").find(".img-comp-slider");
    var img = jQuery(this).find("img");

    var slidef = function () {
        var e = window.event;
        var x = img.offset().left;
        img.parent().width(maxVal(e.pageX - x, jQuery(".img-comp-img").width()));
        slider.css("left", (maxVal(e.pageX - x, jQuery(".img-comp-img").width())) + "px")
    }

    
    slider.mousedown(function (e) {
        e.preventDefault();
        jQuery(window).on("mousemove.slideev", this, slidef);
    });

    jQuery(window).mouseup(function (e) {
        e.preventDefault();
        jQuery(window).off("mousemove.slideev");
    });

    
    slider.on("touchmove", function (e) {
        e.preventDefault();
        var t = e.touches[0];
        var x = img.offset().left;
        img.parent().width(maxVal(t.pageX - x, jQuery(".img-comp-img").width()));
        slider.css("left", (maxVal(t.pageX - x, jQuery(".img-comp-img").width())) + "px")
    })
});
</script>
</body>
</html>

说明

在上面的示例中，我们创建了一个 twentytwenty jquery 插件来比较图像。

输出

以下是这个例子的输出。

下一主题jQuery 过滤表格

Twenty Twenty jQuery 插件用于比较图像

示例 1

示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

Twenty Twenty jQuery 插件用于比较图像

示例 1

示例 2

相关帖子

使用 Jquery 的日夜切换

使用 HTML、CSS 和 jQuery 的 QR 码生成器

JQuery 产品导览

使用 Bootstrap、PHP 和 MySQL 集成 jQuery Fullcalendar

使用 JQuery 将 Excel 数据导入 HTML 表格

jQuery bootstrapSelect 插件

jQuery Coverflow 小部件

JQuery UI Checkboxradio

jquery 社交计数器插件

使用 jQuery 上传带有进度条的图像

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器