HTML5隐藏图片代码,使用HTML5和CSS3打造炫酷带缩略图的图片画廊

图片画廊插件在网上数之不尽，大多数是使用js或jQuery来完成的。如何使用更少的代码来制作一个效果炫酷的图片画廊效果是我们这批文章的研究目的。HTML5提供了许多新的属性，利用这些实现和CSS3的动画功能，我们就可以轻松的制作出许多意想不到的效果。在这个案例中，我们使用了一些CSS hack技术和5个HTML5特性：

input元素可以出现在页面的任何位置，而不必关联一个form元素。

正确的设置label元素的属性值可以将它用来替代单选按钮。

只要标签是有效的，一个radio按钮不必可见就可以使用它。

label元素可以使用图片来作为内容。

CSS可以通过:checked伪元素来监控单选按钮的状态。

HTML结构

缩略图

要实现这项技术，HTML结构必须是正确有效的。其中，缩略图的HTML结构如下：

为了简单，所有的缩略图都使用相同的尺寸。上面的代码需要注意以下几点：

label元素中的for属性必须和radio元素的id相关联。

每一个id必须是唯一的。

所有的radio元素的name属性必须相同，这样才能进行相互切换。

原图

大图的HTML代码页同样十分简单：

上面的代码中唯一的要求是每一个图片都带有一个id。

CSS样式

基本CSS样式如下(注意代码中没有使用浏览器厂商的前缀)：

input[type=radio] { display: none; }

label img { width: 15%; display: block; float: left; clear: left; border-right: 40px solid #111; }

label:hover { cursor: pointer; }

div#churches { width: 70%; position: relative; }

div#churches img { position: absolute; max-width: 100%; opacity: 0; transform: scale(0.8); transition: .5s all linear; }

上面的代码中声明隐藏radio元素，并将图片制作为响应式布局。缩略图被放置到容器的左边。通过border-right属性使图片和缩略图之间有一些间隙。大图开始时是不可见的，并且它们的宽度为原图的80%。

现在要添加用户互动功能：

#vallbona:checked ~ #churches img#monges { opacity: 1; transform: scale(1); }

#woodward:checked ~ #churches img#presby { opacity: 1; transform: scale(1); }

#woodward2:checked ~ #churches img#presby2 { opacity: 1; transform: scale(1); }

上面代码的选择器稍微有些复杂，仔细体会。翻译为中文就是：如果用户选择了指定id的radio按钮(不管是点击了radio按钮还是和它关联的label)，那么选择它里面的id为churches的兄弟元素。如果元素包含有指定ID的图片，设置最终元素的opacity: 1，并设置scale为正常样式。

你也可以用一个组声明来完成上面的语句：

#vallbona:checked ~ #churches img#monges, #woodward:checked ~ #churches img#presby, #woodward2:checked ~ #churches img#presby2 { opacity: 1; transform: scale(1); }

现在，在初始化时是不会显示任何一幅大图的，我们可以通过设置其中某个radio按钮为checked来显示这幅图片。

到这里，这个图片画廊效果就做好了，希望这个效果能对你有所帮助。

相关图片画廊推荐：