使用 jQuery 的前后滑块

2025年3月17日 | 阅读 7 分钟

在本文中，我们将了解使用 jQuery 实现的“前后对比滑块”。它用于并排比较前后图像。在此，我们使用范围滑块，允许用户控制屏幕上两个图像的显示方式。

示例 1

<! DOCTYPE html>    
<html>    	
    <head>    	
        <meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />    
        <title> Example of  Before and After Slider using  jQuery </title>    
        <meta name = "description"/>    
        <meta content = "width=800, initial-scale=1"    
        name = "viewport" />     
<script src = ?https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js?> </script>
<style>
@import url(https://fonts.googleapis.com/css?family=Work+Sans:400,300,700|Open+Sans:400italic,300italic);
h1 {
  color: red;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.8vw;
  letter-spacing: 5px;
  line-height: 1;
  margin: 0;
}
html,
body {
  font-family: "Open Sans", sans-serif;
  background-color: #f3f3f3;
}
.ba-card {
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
  margin-top: 20px;
  box-shadow: 0px 7px 43px -6px rgba(0, 0, 0, 0.75);
}
.ba-card::after {
  clear: both;
  content: "";
  display: block;
}
.ba-card img {
  width: 100%;
  height: auto;
}
@media screen and (min-width: 768px) {
  .ba-card {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
  .ba-card::after {
    clear: both;
    content: "";
    display: block;
  }
}
a {
  text-decoration: none;
}
a:link, a:visited {
  color: #666;
}
a:hover, a:focus {
  border-bottom: 1px solid #666;
}
.twenty-horizontal .twenty-handle:before, .twenty-horizontal .twenty-handle:after, .twenty-vertical .twenty-handle:before, .twenty-vertical .twenty-handle:after {
  content: " ";
  display: block;
  background: white;
  position: absolute;
  z-index: 30;
  box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
}
.twenty-horizontal .twenty-handle:before, .twenty-horizontal .twenty-handle:after {
  width: 3px;
  height: 9999px;
  left: 50%;
  margin-left: -1.5px;
}
.twenty-vertical .twenty-handle:before, .twenty-vertical .twenty-handle:after {
  width: 9999px;
  height: 3px;
  top: 50%;
  margin-top: -1.5px;
}
.twenty-before-label, .twenty-after-label, .twenty-overlay {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

.twenty-before-label, .twenty-after-label, .twenty-overlay {
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.twenty-before-label, .twenty-after-label {
  -webkit-transition-property: opacity;
    transition-property: opacity;
}
.twenty-before-label:before, .twenty-after-label:before {
  position: absolute;
  background: rgba(255, 255, 255, 0.2);
  line-height: 38px;
  padding: 0 20px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}
.twenty-horizontal .twenty-before-label:before, .twenty-horizontal .twenty-after-label:before {
  top: 50%;
  margin-top: -19px;
}
.twenty-vertical .twenty-before-label:before, .twenty-vertical .twenty-after-label:before {
  left: 50%;
  margin-left: -45px;
  text-align: center;
  width: 90px;
}
.twenty-left-arrow, .twenty-right-arrow, .twenty-up-arrow, .twenty-down-arrow {
  width: 0;
  height: 0;
  border: 6px inset transparent;
  position: absolute;
}
.twenty-left-arrow, .twenty-right-arrow {
  top: 50%;
  margin-top: -6px;
}
.twenty-up-arrow, .twenty-down-arrow {
  left: 50%;
  margin-left: -6px;
}
.twenty-container {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  z-index: 0;
  overflow: hidden;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
}
.twenty-container img {
  max-width: 100%;
  position: absolute;
  top: 0;
  display: block;
}
.twenty-container * {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
.twenty-before-label:before {
  content: "Before";
}
.twenty-after-label {
  opacity: 1;
}
.twenty-after-label:before {
  content: "After";
}
.twenty-horizontal .twenty-before-label:before {
  left: 10px;
}
.twenty-overlay {
  -webkit-transition-property: background;
  -moz-transition-property: background;
  transition-property: background;
  background: rgba(0, 0, 0, 0);
  z-index: 25;
}
.twenty-overlay:hover {
  background: rgba(0, 0, 0, 0.5);
}
.twenty-overlay:hover .twenty-after-label, .twenty-before-label {
  opacity: 1;
}
.twenty-before, .twenty-after {
  z-index: 20;
}
.twenty-horizontal .twenty-handle:before {
  bottom: 50%;
  margin-bottom: 22px;
  box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
}
.twenty-vertical .twenty-handle:before {
  left: 50%;
  margin-left: 22px;
  box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
}
.twenty-vertical .twenty-handle:after {
  right: 50%;
  margin-right: 22px;
  box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
}
.twenty-left-arrow {
  border-right: 6px solid white;
  left: 50%;
  margin-left: -17px;
}
.twenty-right-arrow {
  border-left: 6px solid white;
  right: 50%;
  margin-right: -17px;
}
.twenty-up-arrow {
  border-bottom: 6px solid white;
  top: 50%;
  margin-top: -17px;
}
.twenty-down-arrow {
  border-top: 6px solid white;
  bottom: 50%;
  margin-bottom: -17px;
}
.twenty-before-label:before, .twenty-after-label:before {
  color: #666b7a;
  font-size: 23px;
  letter-spacing: 0.1em;
}
.twenty-handle {
  height: 38px;
  width: 38px;
  background-color: #3c667e;
  position: absolute;
  left: 50%;
  top: 30%;
  margin-left: -22px;
  margin-top: -12px;
  border: 3px solid white;
  -webkit-border-radius: 1000px;
  -moz-border-radius: 1000px;
  border-radius: 1000px;
  box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
  z-index: 40;
  cursor: pointer;
}
.twenty-before-label:before, .twenty-after-label:before {
  color: #233e8f;
  font-size: 23px;
  letter-spacing: 0.1em;
}
</style>
<body>
<h1> Example: Before and After Slider Using jquery </h1>
<div class = "ba-card">
	<div class = "horizontal-ba">
<img src = "https://static.companycam.com/rQmyi0raeeA1457553857.jpg"> <img src = "https://static.companycam.com/0wYEGR0UEV41457553857.jpg>
	</div>
</div>
<script>
(function (module) {
	if (typeof define === 'function' && define.amd) {
		define(['jquery'], module);
	} else {
		module(jQuery);
	}
})(function(jQuery, undefined) {
			    threshold = 6,
	    add = jQuery.event.add,
	    remove = jQuery.event.remove,
	    trigger = function(node, type, data) {
	    	jQuery.event.trigger(type, data, node);
	    };
	    mouseevents = {
	    	move: 'mousemove',
	    	cancel: 'mouseup dragstart',
	    	end: 'mouseup'
	    },
	    touchevents = {
	    	move: 'touchmove',
	    	cancel: 'touchend',
	    	end: 'touchend'
	    };	
	function Timer(fn){
		var callback = fn,
		    active = false,
		    running = false;	
		function trigger(time) {
			if (active){
				callback();
				requestFrame(trigger);
				running = true;
				active = false;
			}
			else {
				running = false;
			}
		}	
		this.kick = function(fn) {
	function returnTrue() {
		return true;
	}
	function returnFalse() {
		return false;
	}
	function preventDefault(e) {
		e.preventDefault();
	}
	function preventIgnoreTags(e) {
			if (ignoreTags[ e.target.tagName.toLowerCase() ]) { return; }	
		e.preventDefault();
	}
	function isLeftButton(e) {
		return (e.which === 1 && !e.ctrlKey && !e.altKey);
	}
	
	function changedTouch(e, event) {
		var touch = identifiedTouch(e.changedTouches, event.identifier);
		if (!touch) { return; }
pageX === event.pageX && touch.pageY === event.pageY) { return; }
		return touch;
	}
	function mousedown(e){
		var data;
		if (!isLeftButton(e)) { return; }
		data = {
			target: e.target,
			startX: e.pageX,
			startY: e.pageY,
			timeStamp: e.timeStamp
		};
		add(document, mouseevents.move, mousemove, data);
		add(document, mouseevents.cancel, mouseend, data);
	}
	function mousemove(e){
		var data = e.data;
		checkThreshold(e, data, e, removeMouse);
	}
	function mouseend(e) {
		removeMouse();
	}
	function removeMouse() {
		remove(document, mouseevents.move, mousemove);
		remove(document, mouseevents.cancel, mouseend);
	}
	function touchstart(e) {
		var touch, template;
		if (ignoreTags[ e.target.tagName.toLowerCase() ]) { return; }
		touch = e.changedTouches[0];
		template = {
			target: touch.target,
			startX: touch.pageX,
			startY: touch.pageY,
			timeStamp: e.timeStamp,
			identifier: touch.identifier
		};
		add(document, touchevents.move + '.' + touch.identifier, touchmove, template);
		add(document, touchevents.cancel + '.' + touch.identifier, touchend, template);
	}
	function touchmove(e){
		var data = e.data,
		    touch = changedTouch(e, data);
		if (!touch) { return; }
		checkThreshold(e, data, touch, removeTouch);
	}
	function touchend(e) {
		var template = e.data,
		    touch = identifiedTouch(e.changedTouches, template.identifier);
		if (!touch) { return; }
		removeTouch(template.identifier);
	}
	function removeTouch(identifier) {
		remove(document, '.' + identifier, touchmove);
		remove(document, '.' + identifier, touchend);
	}
	function checkThreshold(e, template, touch, fn) {
		var distX = touch.pageX - template.startX,
		    distY = touch.pageY - template.startY;
		if ((distX * distX) + (distY * distY) < (threshold * threshold)) { return; }
		triggerStart(e, template, touch, distX, distY, fn);
	}
	function handled() {
		this._handled = returnTrue;
		return false;
	}
function activeMousemove(e) {
		var timer = e.data.timer;
		e.data.touch = e;
		e.data.timeStamp = e.timeStamp;
		timer.kick();
	}
	function activeMouseend(e) {
		var event = e.data.event,
		    timer = e.data.timer;
		removeActiveMouse();
		endEvent(event, timer, function() {
			setTimeout(function(){
				remove(event.target, 'click', returnFalse);
			}, 0);
		});
	}
	function removeActiveMouse(event) {
		remove(document, mouseevents.move, activeMousemove);
		remove(document, mouseevents.end, activeMouseend);
	}
	function activeTouchmove(e) {
		var event = e.data.event,
		    timer = e.data.timer,
		    touch = changedTouch(e, event);
		if (!touch) { return; }
		e.preventDefault();
		event.targetTouches = e.targetTouches;
		e.data.touch = touch;
		e.data.timeStamp = e.timeStamp;
		timer.kick();
	}
	function activeTouchend(e) {
		var event = e.data.event,
		    timer = e.data.timer,
		    touch = identifiedTouch(e.changedTouches, event.identifier);
		if (!touch) { return; }
		removeActiveTouch(event);
		endEvent(event, timer);
	}
            function removeActiveTouch(event) {
		remove(document, '.' + event.identifier, activeTouchmove);
		remove(document, '.' + event.identifier, activeTouchend);
	}
	function endEvent(event, timer, fn) {
		timer.end(function(){
			event.type = 'moveend';
			trigger(event.target, event);		
			return fn && fn();
		});
	}
function setup(data, namespaces, eventHandle) {
		add(this, 'movestart.move', flagAsHandled);
		return true;
	}
	function addMethod(handleObj) {
		if (handleObj.namespace === "move" || handleObj.namespace === "moveend") {
			return;
		}
		add(this, 'dragstart.' + handleObj.guid + ' drag.' + handleObj.guid, preventDefault, undefined, handleObj.selector);
		add(this, 'mousedown.' + handleObj.guid, preventIgnoreTags, undefined, handleObj.selector);
	}
	function removeMethod(handleObj) {
		if (handleObj.namespace === "move" || handleObj.namespace === "moveend") {
			return;
		}	
		remove(this, 'dragstart.' + handleObj.guid + ' drag.' + handleObj.guid);
		remove(this, 'mousedown.' + handleObj.guid);
	}	
	jQuery.event.special.movestart = {
		setup: setup,
		add: addMethod,
		remove: removeMethod,
		_default: function(e) {
			var event, data;
			if (!e._handled()) { return; }
			function update(time) {
				updateEvent(event, data.touch, data.timeStamp);
				trigger(e.target, event);
			}
			data = {
				event: event,
				timer: new Timer(update),
				touch: undefined,
				timeStamp: undefined
			};	
			if (e.identifier === undefined) {
				add(e.target, 'click', returnFalse);
				add(document, mouseevents.move, activeMousemove, data);
				add(document, mouseevents.end, activeMouseend, data);
			}
			else {
				e._preventTouchmoveDefault();
				add(document, touchevents.move + '.' + e.identifier, activeTouchmove, data);
				add(document, touchevents.end + '.' + e.identifier, activeTouchend, data);
			}
		}
	};
	jQuery.event.special.moveend = {
		setup: function() {
			add(this, 'movestart.moveend', jQuery.noop);
		},
	add(document, 'mousedown.move', mousedown); 
	if (typeof Array.prototype.indexOf === 'function') {
		(function(jQuery, undefined){
			var props = ["changedTouches", "targetTouches"],
			    l = props.length;	
			while (l--) {
				if (jQuery.event.props.indexOf(props[l]) === -1) {
					jQuery.event.props.push(props[l]);
				} }
		})(jQuery);
	}; });
 (function($){
  $.fn.twenty = function(options) {
    var options = $.extend({default_offset_pct: 0.5, orientation: 'horizontal'}, options);
    return this.each(function() {
      var sliderPct = options.default_offset_pct;
      var container = $(this);
      var sliderOrientation = options.orientation;
      var beforeDirection = (sliderOrientation === 'vertical') ? 'down' : 'left';
      var afterDirection = (sliderOrientation === 'vertical') ? 'up' : 'right';
      container.wrap("<div class='twenty-wrapper twenty-" + sliderOrientation + "'></div>");
      container.append("<div class='twenty-overlay'></div>");
      var beforeImg = container.find("img:first");
      var afterImg = container.find("img:last");
      container.append("<div class='twenty-handle'></div>");
      var slider = container.find(".twenty-handle");
      slider.append("<span class='twenty-" + beforeDirection + "-arrow'></span>");
      slider.append("<span class='twenty-" + afterDirection + "-arrow'></span>");
      var adjustContainer = function(offset) {
      	if (sliderOrientation === 'vertical') {
      	  beforeImg.css("clip", "rect(0,"+offset.w+","+offset.ch+",0)");
      	}
      	else {
          beforeImg.css("clip", "rect(0,"+offset.cw+","+offset.h+",0)");
    	}
        container.css("height", offset.h);
      };
      var adjustSlider = function(pct) {
        var offset = calcOffset(pct);
        slider.css((sliderOrientation==="vertical") ? "top" : "left", (sliderOrientation==="vertical") ? offset.ch : offset.cw);
        adjustContainer(offset);
      }
      $(window).on("resize.twenty", function(e) {
        adjustSlider(sliderPct);
      });
        container.addClass("active");
        offsetX = container.offset().left;
        offsetY = container.offset().top;
        imgWidth = beforeImg.width(); 
        imgHeight = beforeImg.height();          
      });
      slider.on("moveend", function(e) {
        container.removeClass("active");
      });
      container.find("img").on("mousedown", function(event) {
        event.preventDefault();
      });
      $(window).trigger("resize.twenty");
    });
  };
})(jQuery);
$(window).load(function(){
  $(".horizontal-ba").twenty({
    default_offset_pct: 0.7,
    orientation: 'horizontal'
  });
});
$(window).load(function(){
  $(".vertical-ba").twenty({
    default_offset_pct: 0.7,
    orientation: 'vertical'
  });
});
</script>
</body>
</html>

说明

在上面的示例中，我们使用 jQuery 创建了一个“前后对比滑块”的示例。在这个例子中，我们有两个用于比较的图像，一个有效，另一个是简单的 UI 元素。我们使用了基于 jQuery 的前后对比查看器，它可以通过可拖动且可滑动的滑块来比较两张图像。

输出

以下是这个例子的输出。

下一个主题Round Slider jQuery 插件

使用 jQuery 的前后滑块

示例 1

联系信息

关注我们

教程

面试题

在线编译器

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

面试题

使用 jQuery 的前后滑块

示例 1

相关帖子

jQuery bootstrapSelect 插件

使用 jQuery 自动刷新或重新加载页面

Web 的 jQuery 文件管理器

使用 HTML 和 CSS 和 jQuery 创建 3D 文本效果

如何使用 jQuery 将选项添加到 select 元素

jQuery 翻页

使用带有 Bootstrap 的 jQuery 动态添加删除输入字段

Jquery 倒计时器

Jquery 粘性标题

JQuery menu-aim 插件

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器