本文将介绍一个非常有意思的功能,使用纯 CSS 利用 resize 实现强大的图片切换预览功能。类似于这样:

思路

首先,要实现这样一个效果如果不要求可以拖拽,其实有非常多的办法。

  1. 将两张图片叠加在一起
  2. 改变上层图片的宽度,或者使用 mask, 改变 mask 的透明度区间变化

两种方式都简单示意一下。

假设我们的结构如下,分别使用 background 展示两张图片:

<div class="g-outer">
<div class="g-inner"></div>
</div>

方法一,改变上层图片的宽度的方式:

.g-outer {
width: 650px;
height: 340px;
background-image: url(image1.png);
overflow: hidden;
}
.g-inner {
height: 340px;
background: url(image2.png);
animation: widthchange 3s infinite alternate linear;
}
.mask-change {
mask: linear-gradient(90deg, #fff 0%, #fff 50%, transparent 50%, transparent 100%);
mask-size: 200% 100%;
animation: maskChange 3s infinite alternate linear;
}
@keyframes widthchange {
0% {
width: 650px;
}
100% {
width: 0px;
}
}

效果如下:

当然,使用 mask 遮罩的方式也非常轻松的可以实现类似的效果:

.g-outer {
background-image: url(https://images.cnblogs.com/cnblogs_com/coco1s/881614/o_21081614180122.png);
}
.g-inner {
background: url(https://images.cnblogs.com/cnblogs_com/coco1s/881614/o_21081614175811.png);
mask: linear-gradient(90deg, #fff 0%, #fff 50%, transparent 50%, transparent 100%);
mask-size: 200% 100%;
animation: maskChange 2s infinite alternate linear;
}
@keyframes maskChange {
0% {
mask-position: -100% 0;
}
100% {
mask-position: 0 0;
}
}

也可以得到同样的效果:

上述 DEMO 的完整代码:CodePen Demo -- Switch Picture

对强大的 mask 属性还不是太了解的,可以猛戳:奇妙的 CSS MASK

使用 resize 实现拖拽功能

下一步则是最核心,最关键的一步,巧妙的使用 CSS resize 属性,实现拖拽控制元素的宽度。

什么是 resize

resize:该属性允许你控制一个元素的大小

语法如下:

{
/* Keyword values */
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline;
}

看一个最简单的 DEMO:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aut qui labore rerum placeat similique hic consequatur tempore doloribus aliquid alias, nobis voluptates. Perferendis, voluptate placeat esse soluta deleniti id!</p>
p {
width: 200px;
height: 200px;
resize: horizontal;
overflow: scroll;
}

这里,我们设置了一个长宽为 200px<p> 为横向可拖拽改变宽度。效果如下:

简单总结一些小技巧:

  • resize 的生效,需要配合 overflow: scroll
  • 我们可以通过 resizehorizontalverticalboth 来设置横向拖动、纵向拖动、横向纵向皆可拖动。
  • 可以配合容器的 max-widthmin-widthmax-heightmin-height 限制可拖拽改变的一个范围

将 resize 运用于图片拖拽切换

OK,接下来,我们将 resize 运用于图片拖拽切换。

首先,还是上述的代码,我们将 resize 作用于子元素试试:

<div class="g-outer">
<div class="g-inner width-change"></div>
</div>
.g-outer {
width: 650px;
height: 340px;
background-image: url(image1.png);
overflow: hidden;
} .g-inner {
height: 340px;
background: url(image2.png);
resize: horizontal;
overflow: scroll;
max-width: 640px;
min-width: 10px;
}

可以看到,g-inner 设置了 resize: horizontal,将允许被横向拖动,实际的效果如下:

嗯,非常接近了,因为需要配合 overflow: scroll,所以出现了恼人的滚动条,非常的不美观,我们得想办法干掉滚动条。

借助多一层嵌套及绝对定位实现隐藏滚动条

隐藏滚动条的方式有很多,这里我们介绍其中一种巧妙的方式,我们对我们的结构进行一下改造,再叠加多一层 div:

<div class="g-outer">
<div class="g-inner">
<div class="g-resize"></div>
</div>
</div>

我们将控制拖拽这个功能交给 g-resize,它负责改变元素的宽度,而 g-inner 改为绝对定位,当 g-resize 的宽度增大时,其父元素 g-inner 也会随之增大,最后设置 g-resizeopacity 为 0 即可隐藏滚动条。

核心代码如下:

.g-outer {
position: relative;
width: 650px;
height: 340px;
background-image: url(image1.png);
overflow: hidden;
}
.g-inner {
position: absolute;
top: 0;
left: 0;
min-width: 0;
max-width: 650px;
height: 340px;
background-image: url(image2.png);
}
.g-resize {
position: relative;
resize: horizontal;
overflow: scroll;
width: 0;
height: 340px;
max-width: 650px;
min-width: 15px;
animation: opacityChange 3s infinite alternate linear;
}
@keyframes opacityChange {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

这里,为了方便示意,我将 opacity 设置了一个渐隐渐现的动画效果,方便示意:

借助伪元素,显示拖拽条

最后一步,由于完全隐藏了滚动条,用户也就不知道可以拖拽了,所以我们还需要绘制一个更为好看的拖拽条,这里延续上述的布局,给 .g-inner 再添加一个伪元素,绝对定位在元素最后即可:

.g-inner:before {
content: "";
position: absolute;
background: rgba(0, 0, 0, 0.5);
top: 0;
right: 0;
height: 100%;
line-height: 340px;
}

最终完美达成效果:

完整详细的代码,你可以在我的 CSS 灵感上看到:

CSS 灵感 -- 利用 resize 实现图片切换预览功能

总结一下

通过本文,你可以学会:

  • 利用 resize 来实现容器大小的控制
  • 通过一些巧妙的方式来隐藏不太美观的滚动条
  • 以及配合上述的一些技巧,使用纯 CSS 实现图片拖拽切换预览功能

最后

好了,本文到此结束,希望对你有帮助

更多精彩 CSS 效果可以关注我的 CSS 灵感

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

CSS 奇思妙想 | 使用 resize 实现强大的图片拖拽切换预览功能的更多相关文章

  1. 一、简单的图片上传并预览功能input[file]

    一.简单的图片上传并预览功能input[file] <!DOCTYPE html> <html lang="en"> <head> <me ...

  2. input file实现多选,限制文件上传类型,图片上传前预览功能

    限制上传类型 & 多选:① accept 属性只能与 <input type="file" /> 配合使用.它规定能够通过文件上传进行提交的文件类型. ② mu ...

  3. 为Dynamics CRM注释的图片附件做个预览功能

    关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复163或者20151017可方便获取本文,同时可以在第一时间得到我发布的最新的博文信息,follow me! Dynamics CRM中注释可 ...

  4. HTML5 之 FileReader 的使用 (二) (网页上图片拖拽并且预显示可在这里学到) [转载]

    转载至 : http://www.360doc.com/content/14/0214/18/1457948_352511645.shtml FileReader 资料(英文): https://de ...

  5. 原生JS实现图片上传并预览功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 基于jquery实现图片上传本地预览功能

    一.原理 分为两步: 当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL),把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来.在这里,我们需 ...

  7. 使用input选择本地图片,并且实现预览功能

    1.使用input标签选择本地图片文件 用一个盒子来存放预览的图片 2.JS实现预览 首先添加一个input change事件,再用到 URL.createObjectURL() 方法 用来创建 UR ...

  8. HTML5 之 FileReader 的使用 (网页上图片拖拽并且预显示可在这里学到) [转载]

    转载至 : http://www.360doc.com/content/14/0214/18/1457948_352511416.shtml FileReader 资料(英文) : https://d ...

  9. JavaScript实现本地图片上传预览功能(兼容IE、chrome、FF)

    需要解决的问题有:本地图片如何在上传前预览.编辑:最近发现这个功能很多是基于flash实现的,很多JavaScript实现的代码兼容性都很差,特别是在IE和firefox和chrome三个浏览器上不兼 ...

随机推荐

  1. 徒手从零实现 uTools 系列(三)- 屏幕取色和截屏

    前言 为了进一步提高开发工作效率,最近我们基于 electron 开发了一款媲美 uTools 的开源工具箱 rubick.该工具箱不仅仅开源,最重要的是可以使用 uTools 生态内所有开源插件!这 ...

  2. Hibernate框架(五)面向对象查询语言和锁

    Hibernate做了数据库中表和我们实体类的映射,使我们不必再编写sql语言了.但是有时候查询的特殊性,还是需要我们手动来写查询语句呢,Hibernate框架为了解决这个问题给我们提供了HQL(Hi ...

  3. centos 安装es

    第一步:必须要有jre支持 elasticsearch是用Java实现的,跑elasticsearch必须要有jre支持,所以必须先安装jre 第二步:下载elasticsearch 进入官方下载 h ...

  4. elf文件结构解读以及plt节got节的理解

    前言: 熟悉elf文件结构是一件很不错的事,因为安卓中的so加固以及修复都是需要这些知识的,包括pwn里面的rop之类的,也都是 和got节,plt节息息相关的,个人建议是在搞懂elf文件结构后,自己 ...

  5. Min25 筛学习笔记

    仅仅是 \(min25\) 筛最基本的方法,没有任何推式子的例题.(想了想还是加两道吧qwq) 这里解决的是 \(Luogu\) 那道模板题. min25 基本方法: 最基础的是两个式子: \[G(n ...

  6. web自动化之浏览器启动

    一.环境准备 1.本地引入jar 从http://selenium-release.storage.googleapis.com/index.html?path=3.9/,下载selenium-ser ...

  7. Java基础00-继承17

    1. 继承 1.1 继承概述 但是我们将相同的类提取出来就会变成这个样子 让他们之间产生一个继承的关系 1.2 继承的好处和弊端 IS-A.HAS-A和USE-A关系 苹果是水果的一种可以使用继承猫是 ...

  8. WinForm使用DataGridView实现类似Excel表格的查找替换

    在桌面程序开发过程中我们常常使用DataGridView作为数据展示的表格,在表格中我们可能要对数据进行查找或者替换. 其实要实现这个查找替换的功能并不难,记录下实现过程,不一定是最好的方式,但它有用 ...

  9. 密码学系列之:Merkle–Damgård结构和长度延展攻击

    密码学系列之:Merkle–Damgård结构和长度延展攻击 简介 Merkle–Damgård结构简称为MD结构,主要用在hash算法中抵御碰撞攻击.这个结构是一些优秀的hash算法,比如MD5,S ...

  10. Leetcode6. Z 字形变换

    > 简洁易懂讲清原理,讲不清你来打我~ 输入字符串,按下右上下右上排列后输出字符串![在这里插入图片描述](https://img-blog.csdnimg.cn/4578280a7c1848c ...