Web Component实现图片拖拽前后对比效果代码-html代码-BFW代码库

Web Component实现图片拖拽前后对比效果代码

代码语言：html

所属分类：拖放

代码描述：Web Component实现图片拖拽前后对比效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
<style>
figure:has(image-compare) {
	margin-inline: 0;
	figcaption { text-align: center; }
}

image-compare {
	--exposure: 50%;
	
	--thumb-background-color: hsla(0, 0%, 100%, 0.9);
	--thumb-background-image: url('data:image/svg+xml;utf8,<svg viewbox="0 0 60 60" width="60" height="60" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M20 20 L10 30 L20 40"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M40 20 L50 30 L40 40"/></svg>');
	--thumb-size: clamp(3em, 10vmin, 5em);
	--thumb-radius: 50%;
	--thumb-border-color: hsla(0, 0%, 0%, 0.9);
	--thumb-border-size: 2px;

	--focus-width: var(--thumb-border-size);
	--focus-color: hsl(200, 100%, 80%);

	--divider-width: 2px;
	--divider-color: hsla(0, 0%, 0%, 0.9);

	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	overflow: clip;
	
	&:not(:defined) {
		flex-direction: row;
		overflow-x: auto;
	}
	
	img {
		display: block;
		height: auto;
		width: 100%;
	}
	
	&:defined .image-2-wrapper {
		position: absolute;
		top: 0;
		filter: drop-shadow(calc(var(--divider-width) * -1) 0 0 var(--divider-color));
		img {
			clip-path: polygon(
				calc(var(--exposure) + var(--divider-width)/2) 0,
				100% 0,
				100% 100%,
				calc(var(--exposure) + var(--divider-width)/2) 100%
			);
			display: block;
		}
	}
	
	label {
		align-items: stretch;
		display: flex;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
	}
	
	[type=range] {
		cursor: col-resize;
		margin: 0 calc(var(--thumb-size) / -2);
		height: unset;
		width: calc(100% + var(--thumb-size));
		appearance: none;
		-webkit-appearance: none;
		background: none;
		border: none;
	}
	
	.visually-hidden {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap; /* added line */
		border: 0;
	}
}
/* Styling range input thumbs requires separately defining the CSS rules for -moz and -webkit. */
image-compare [type=range] {
	&::-moz-range-track { height: unset; background: transparent; }
	&::-moz-range-thumb {
		background-color: var(--thumb-background-color);
.........完整代码请登录后点击上方下载按钮下载查看