Page 200 - css揭秘

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

JavaScript 代码是相当简洁明了的：

$$('.image-slider').forEach(function(slider) { JS
// 创建附加的div元素，并用它包住第一个图片元素
var div = document.createElement('div');
var img = slider.querySelector('img');
slider.insertBefore(img, div);
div.appendChild(img);

// 创建滑块
var range = document.createElement('input');
range.type = 'range';
range.oninput = function() {
div.style.width = this.value + '%';
};
slider.appendChild(range);
});

前面一种解决方案所用到的 CSS 基本上可以直接套用在这里。只需要
删掉那些我们不再需要的部分即可：
„ resize 属性；

„ .image-slider > div::before 规则，因为已经不存在调节手
柄了；
„ max-width，因为现在由滑块和脚本来控制宽度。
经过这一番修改之后，我们的 CSS 代码变为：

.image-slider {
position:relative;
display: inline-block;
} 图 6-30

.image-slider > div { 这个控件现在可以工作了，但我
position: absolute; 们还需要给这个范围输入控件加
top: 0; bottom: 0; left: 0; 点样式
width: 50%;
overflow: hidden;
} 小提示

.image-slider img { 用 input:in-range 来代替
display: block; 简单的 input 选择符，是为了只
user-select: none; 在浏览器支持范围输入控件时才
}
对它设置样式。然后，我们就可
以利用层叠机制把它在旧版浏览
试验一下这段代码，你会发现它已经可以正常工作了，但看起来还有点
器下隐藏掉或设置为其他样式。

35 交互式的图片对比控件 169

඀ࠡ JOEC