css 交互式图像比较 - 范围输入版本

Posted 2021-05-13

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}

function $$(selector, context) {
	context = context || document;
	var elements = context.querySelectorAll(selector);
	return Array.prototype.slice.call(elements);
}

$$('.image-slider').forEach(function(slider) {
	// Create the extra div and
	// wrap it around the first image
	var div = document.createElement('div');
	var img = $$('img', slider)[0];
	slider.insertBefore(div, img);
	div.appendChild(img);
	
	// Create the slider
	var range = document.createElement('input');
	range.type = 'range';
	range.oninput = function() {
		div.style.width = this.value + '%';
	};
	slider.appendChild(range);
});

<div class="image-slider">
<img src="http://csssecrets.io/images/adamcatlace-before.jpg" alt="Before" />
<img src="http://csssecrets.io/images/adamcatlace.jpg" />
</div>

/**
 * Interactive image comparison — range input version
 */

.image-slider {
	position:relative;
	display: inline-block;
}

.image-slider > div {
	position: absolute;
	top: 0; bottom: 0; left: 0;
	width: 50%;
	max-width: 100%;
	overflow: hidden;
}

.image-slider img {
	display: block;
	user-select: none;
}

.image-slider input {
	position: absolute;
	left: 0;
	bottom: 10px;
	width: 50%;
	margin: 0;
	transform: scale(2);
	transform-origin: left bottom;
	-webkit-filter: contrast(.5);
	filter: contrast(.5);
	mix-blend-mode: luminosity;
}