图形对比之resize

最新推荐文章于 2024-11-11 23:45:17 发布

红绿鲤鱼

最新推荐文章于 2024-11-11 23:45:17 发布

阅读量146

点赞数 2

文章标签： css

本文链接：https://blog.csdn.net/tupianahz/article/details/96975356

版权

题引

资料：《css揭秘》
----- 图片对比滑动控件基本上可以理解为两层结构：下层是一张固定的图片；上层的图片则可以在水平方向上调整大小，从而或多或少地显露出下层图片。这正是 JavaScript 框架的价值所在：让上层图片的宽度可以由鼠标拖动调整。不过，要让某个元素的大小变得可调整，并不需要动用脚本。在 CSS 基本 UI 特性中，我们获得了一个为此而生的属性：低调的 resize ！
在这里插入图片描述

简约版

先上html代码：
用一个 <//div> 作为它的容器，再对这个容器应用 resize属性

<div class="image-slider">
	 <div>
	 	<img src="adamcatlace-before.jpg" alt="Before" />
	 </div>
	 <img src="adamcatlace-after.jpg" alt="After" />
</div>

css代码

.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;   /* 让它可以裁切图片 */
	resize: horizontal;
}

.image-slider img {
	display: block;
	user-select: none;  /* 即使用户在没有点中调节手柄的情况下拖动鼠标，也不会误选图片*/
}

.image-slider>div::before {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	width: 12px;
	height: 12px;
	padding: 5px;
	background: linear-gradient(-45deg, white 50%, transparent 0);
	background-clip: content-box;
	cursor: ew-resize;   /* 提示用户这个区域可以像调节手柄那样拖动 */
}

效果
在这里插入图片描述