图片比对让网页熠熠生辉

相信不少人都看过圆明园破损后的图片，残垣败壁，令人惋惜。一些网站为了增加对比程度，将圆明园被毁前后的图片放在一起，这样确实非常鲜明。
“对比”已经越来越多地被用来在偏设计的网站中了，而最常见的布局方案是将两张图并排/并列放置。但由此带来的问题是：就像“找不同”一样，人通常只能观察到非常明显的差异 —— 正如上面所说“圆明园对比图”一样。于是还有的网站干脆把两张对比图弄成一张图片展示，简直无语。

跟上面描述场景相似的还有一个离谱的解决方案：把两张图放在一个位置上，然后定时来回变换 —— 开发者人为制造一个突兀地、抓住眼球的场景（氛围）！但这样也不行：用户需要等待多次变换才能看到你想表达的东西。这不仅牺牲了他们的时间也会分散他们的精力。就像这样：

（你还可以让它再快一些）
但是说到这里，我们能不能不改变“把两张图放在一个位置上”的整体方针，而把“自动地变换”改为“用户手动控制图片展示”？因为上面这个效果太丑了…而且一般页面有一个轮播图就够了！
经过查找，笔者发现了一种既符合所想又非常友好的解决方案，被叫做“图片对比滑动控件”，其实现思路是：将两张图片叠加起来，初始时各自只展示一部分，允许用户通过拖动分隔条来控制两张图片各自显露区域的大小。
咔~

通过上面的描述，你能想到什么？

图片叠加 -> 必然至少一张图片脱离了文档流存在
拖动大小 -> <textarea> -> css resize 属性（其实用JS也可以，但在笔者总结的“小梦优先策略”中，CSS使用优先级大于JS，这有好处！）

让我们先来剖析下 resize 属性！
你或许从来没听过它，但你一定体验过 —— 因为对 <textarea> 元素来说，这个属性被默认赋值为 both ，这让 textarea 在水平和垂直方向上都可以任意调整：

both：允许用户在水平和垂直方向上调整元素的大小
horizontal：允许用户在水平方向上调整元素的大小
vertical：允许用户在垂直方向上调整元素的大小
none：一般为默认值
block：‎根据‎‎编写模式‎‎和‎‎方向‎‎值，元素显示允许用户水平或垂直调整组件大小的机制
inline：根据‎‎编写模式‎‎和‎‎方向‎‎值，元素显示允许用户以内联方向水平或垂直调整元素大小的机制

实际上，这个属性可作用且生效在任何 overflow 值不是 visible 的元素上！

让我们再继续剖析一下上面说的“终极解决方案”！
深入一点地说，它基本包含两层：一层可以拖动，一层是固定的。上层图片在水平方向调整大小从而或多或少地显露出下层图片。

所以，HTML代码应该是这样的：

<div class="image-slider" title="拖动右下角可自由查看"><div><img src="img/n1.jpg" alt="这是原图" /></div><img src="img/n2.jpg" alt="这是对比图" />
</div>

接下来初始化一些定位和尺寸：

.image-slider{position: relative;display: inline-block;width: 400px;height: 300px;overflow: hidden;
}
.image-slider > div{position: absolute;top: 0;bottom: 0;left: 0;width: 50%;max-width: 100%; /* 虽说下面设置了overflow，但是你会发现如果不设置这一行拖动行为仍然可以发生在父元素之外 */overflow: hidden; /* 溢出隐藏 */resize: horizontal;
}
.image-slider img{display: block;height: 100%;
}

这时候，图片上就显示了“经典 textarea 手柄”了。不过…这怎么看怎么别扭的右下角图标着实难受，还不容易辨认！
不幸的是，目前还没有任何标准的方法可以设置这个“调节手柄”的样式。有些渲染引擎特别为这个需求提供了私有的伪元素（比如 ::-webkit-resizer），但目前来看局限性非常大。笔者有一个大胆的想法：用一个伪元素覆盖在调节手柄之上。这一方面可以很方便地设置样式；另一方面，即使在不加 pointer-events: none 的情况下，这个伪元素也不会干扰调节手柄的功能：

.image-slider > div::before{content: '';position: absolute;bottom: 0;right: 0;width: 12px;height: 12px;padding: 1px;background: linear-gradient(-45deg,white 50%,transparent 0);background-clip: content-box;cursor: ew-resize;
}

这样就几乎完美的实现我们想要的效果了！

nice~

福利放送
最近接到华为云的邀请
这一年中华为云也陆陆续续推出了各种各样的活动，但是毫不客气的讲，没有比开年采购季更加优惠的。
所以今年的开年采购季活动又开始了，各位小伙伴们不要错过呀！
首先是主打产品：

1核2G 1M带宽云耀云服务器 88一年，低至0.7折。限购1台（企业认证可购买两台）
2核4G 5M带宽云耀云服务器 413一年，低至1.2折。限购3台（墙裂推荐）
4核8G 1M带宽云耀云服务器 599一年，低至1.6折。限购3台
4核8G 5M带宽C6s高性能服务器 2385一年，低至3.9折。限购3台
.COM域名23元一年！！！（推荐）

之前活动没有参与上的小伙伴千万不要错过。
另外，我也跟华为云的小伙伴争取到了一些额外的福利。

个人注册并进行账号认证，可获得100元无门槛代金券！注意是无门槛，不是官网送的满减券。
企业注册并进行企业实名认证的，可获得200元代金券
注册并购买活动产品，再送100元代金券；另外企业注册的小伙伴还可以参加抽奖，100%中奖，最高可获得华为Mate Pad。

参与方式：扫码进入活动页面，点击右上角注册华为云账号

通过二维码/链接注册、实名认证用户，会在7工作日内收到代金券。代金券没有任何消费门槛，但是不能用于购买活动产品。可以给自己新买的服务器续费，或者买块硬盘。

注：开年采购季最优惠的产品都是仅限新用户购买的！所以大家一定不要先使用代金券，用了就不是新用户了。新用户资格非常珍贵，没有新用户资格就没办法购买88元一年的服务器了。

图片比对让网页熠熠生辉相关推荐

csv python 图片存_Python|任意网页中的所有网址的保存
参考程序: import requestsfrom bs4 import BeautifulSoupimport pandas as pdurl = 'https://movie.douban.com ...
微博图片地址查uid网页版源码
介绍: 微博图片地址查uid网页版源码自适应,非常人性化,内附API接口网盘下载地址: http://kekewl.net/mTG4fzXTzTE0 图片:
Deep Zoom 让高清图片在你的网页中飞起来
很多站长和博主都有关于高清图片怎么放在页面上的困惑. 图片文件太大了, 加载时间就会很长,我相信没人愿意为了看一张图片要等个10几秒钟. 就算页面不需要用户的等待, 一大块空白的区域, 用户体验也就好 ...
html/css使文字图片div在整个网页上居中（水平居中+垂直居中）transform属性配置
在使用html/css编写网页时,有时需要让一段文字或图片等在整个网页居中,即既是水平居中又是垂直居中,而单单使用 text-align:center 只是让文字在水平上居中,而无法在垂直方向上也居中 ...
最新图片在线加水印网页源码+亲测可用
正文: 最新图片在线加水印网页源码+亲测可用,专门用于给图片加水印打码的工具,完全基于浏览器本地API,无任何网络请求. 程序: wwuwe.lanzouq.com/i1W4508nyhjc 图片:
python下载网页里面所有的图片-Python批量下载网页图片详细教程
很多朋友在网上查找批量下载图片的方法~发觉挺凌乱的,无从下手.这里绿茶小编就来跟大家分享下使用Python批量下载图片方法. 目标:爬取某个网站上n多页的链接,每个链接有n多张图片,每一页对应一个文件 ...
电脑打开html不显示图片,网页不显示图片,详细教您网页不显示图片怎么解决
在使用电脑浏览网页的时候是不是有碰到过网页不显示图片的时候呢?有的时候可能是因为电脑网速慢.所以加载图片不成功!而有的时候是因为有些地方需要设置.那网页不显示图片怎么解决?下面,小编跟大家介绍网页不显 ...
js如何获取html图片,JS/JQuery获取网页或文章或某DIV所有图片
要获取网页所有图片,我们可以通过Javascript就能轻松实现,不过要想获得文章或某容器(如:Div)里所有图片,使用JQuery而不是Javascript来实现就会变得更加简单.本文将给你详细介绍 ...
网页嵌入对象（图片、视频、网页）
在网页中嵌入对象,实际上并不会在网页中插入对象,而是通过某种标签链接到指定的对象,标签创建的只是被引用对象的占位符而已. 嵌入式对象主要包括图片.视频.音频.文档等,不同的对象使用不同的标签,并具有不 ...

图片比对让网页熠熠生辉

图片比对让网页熠熠生辉相关推荐

最新文章

热门文章