html中幻灯片制作_HTML5中的“前后”图像比较幻灯片控件

html中幻灯片制作

As my 2^nd year students work towards their graduate showcase, my lecture content has increasingly included ways they might share and illustrate their portfolio work. Employers aren’t just interested in results: they are increasingly focused on process, the narrative behind a creative work. One way of demonstrating workflow is to use a “before and after” image comparison, coupled with a slide control. In the example above, I’m demonstrating PhotoShop retouching work on an image.

正如我的^第二年级的学生对他们的毕业作品展示 ，我的演讲内容已经越来越包括他们可能共享，并说明其投资组合的工作方式。 雇主不仅对结果感兴趣：他们越来越关注过程 ，即创造性作品背后的叙述。 演示工作流程的一种方法是使用“之前和之后”图像比较以及滑动控件。 在上面的示例中，我演示了PhotoShop在图像上的润饰工作。

Previous solutions for this kind of gallery usually require considerable JavaScript programming, often using a framework. But with HTML5 and the range input, we can reduce the code to just three lines of vanilla JavaScript and some CSS.

此类画廊的先前解决方案通常需要使用框架进行大量的JavaScript编程。 但是使用HTML5和range输入，我们可以将代码减少到仅三行原始JavaScript和一些CSS 。

The HTML used in this example is slightly unusual in that it lacks any content: all images will be presented using the CSS background-image property.

此示例中使用HTML有点不寻常，因为它缺少任何内容：所有图像都将使用CSS background-image属性显示。

<div id="comparison">
	<figure>
		<div id="divisor"></div>
	</figure>
	<input type="range" min="0" max="100" value="50" id="slider" oninput="moveDivisor()">
</div>

The #comparison div surrounds and controls everything, while the figure inside displays the “before” image, and the #divisor contains the “after” version.

#comparison div围绕并控制着所有内容，而内部figure显示“之前”图像，而#divisor包含“之后”版本。

Because this solution is responsive, image size doesn’t matter: what matters is that both images are the same size, with their subjects matched in position and perspective.

由于此解决方案具有响应能力，因此图像大小无关紧要：重要的是两个图像的大小相同 ，并且对象的位置和视角匹配。

CSS (The CSS)

The CSS to set up the images is slightly more complex:

设置图像CSS稍微复杂一些：

div#comparison { 
	width: 60vw;
	height: 60vw;
	max-width: 600px;
	max-height: 600px;
	overflow: hidden; 
}
div#comparison figure { 
	background-image: url(photoshop-face-before.jpg);
	background-size: cover;
	font-size: 0;
	width: 100%;
	height: 100%;
	margin: 0; 
}
div#comparison figure > img {
	position: relative;
	width: 100%;
}
div#comparison figure div { 
	background-image: url(photoshop-face-after.jpg);
	background-size: cover;
	position: absolute;
	width: 50%; 
	box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
	overflow: hidden;
	bottom: 0; height: 100%; 
}

As these images are square, I’m sizing their containers using the same vw measurement for both height and width; images with wider aspect ratios would require different values. The container for the “after” image has a slight shadow on its leading edge to clarify the distinction between the background and foreground; the figure’s font-size and margin have been set to 0 to remove all space in the elements. The inner div is set to 50% of the width of its container to show half of the “after” image, matching the initial value of the range slider.

由于这些图像是正方形的，因此我要对高度和宽度使用相同的vw度量来调整其容器的大小； 具有宽高比的图像将需要不同的值。 “后”图像的容器在其前端有一个阴影，以澄清背景和前景之间的区别； 图形的font-size和margin已设置为0以删除元素中的所有空格。 内部div设置为其容器宽度的50％，以显示“后”图像的一半，与范围滑块的初始值匹配。

Next, we turn to customizing the range slider. This is made more complex by the fact that customizing the pseudo-elements created in the DOM for the sliders must be specified separately for each browser:

接下来，我们转向自定义范围滑块。 由于必须为每个浏览器分别指定自定义在DOM中为滑块创建的伪元素，因此这一点变得更加复杂：

input[type=range]{
	-webkit-appearance:none;
	-moz-appearance:none;
	position: relative;
	top: -2rem; left: -2%;
	background-color: rgba(255,255,255,0.1);
	width: 102%; 
}
input[type=range]:focus { 
	outline: none;
}
input[type=range]:active {
	outline: none;
}
input[type=range]::-moz-range-track {
	-moz-appearance:none;
	height:15px;
	width: 98%;
	background-color: rgba(255,255,255,0.1); 
	position: relative;
	outline: none;    
}
input[type=range]::active {
	border: none;
	outline: none;
}
input[type=range]::-webkit-slider-thumb {
	-webkit-appearance:none;
	width: 20px;
	height: 15px;
	background: #fff;
	border-radius: 0;
}
input[type=range]::-moz-range-thumb {
	-moz-appearance: none;
	width: 20px;
	height: 15px;
	background: #fff;
	border-radius: 0;
}   
input[type=range]:focus::-webkit-slider-thumb {
	background: rgba(255,255,255,0.5);
}
input[type=range]:focus::-moz-range-thumb {
	background: rgba(255,255,255,0.5);
}

JavaScript (The JavaScript)

Finally, the moveDivisor() JavaScript function called by our range input, placed at the end of our page:

最后，我们的范围输入调用的moveDivisor() JavaScript函数位于页面的末尾：

divisor = document.getElementById("divisor");
slider = document.getElementById("slider");
function moveDivisor() {
	divisor.style.width = slider.value+"%";
}

If you want to ensure that the divisor is reset after page load (since Firefox will remember the last value the slider contained) add a call to the same function after the window loads:

如果您要确保页面加载后除数被重置(因为Firefox会记住滑块包含的最后一个值)，请在窗口加载后对同一函数添加调用：

window.onload = function() {
	moveDivisor();
};

That’s all there is to it. Of course, there’s much more we could add – and will, in future articles – but that should be enough to get anyone interested in such a technique started with their own version of this effect.

这里的所有都是它的。 当然，在以后的文章中，我们可以添加更多的内容，并且将会添加更多的内容，但这足以使任何对这种技术感兴趣的人从他们自己的效果版本开始。

Lea Verou created an excellent, CSS-only version of this before-after comparison slider

Lea Verou为此前后比较滑块创建了一个出色的纯CSS版本

翻译自: https://thenewcode.com/819/A-Before-And-After-Image-Comparison-Slide-Control-in-HTML5

html中幻灯片制作