CSS在网页设计中起着举足轻重的作用,其中一个功能就是可以通过点击手机上的图片,生成并展示大图。下面就来介绍一下这个实现方法。.img-wrapper { position: relative; di
CSS在网页设计中起着举足轻重的作用,其中一个功能就是可以通过点击手机上的图片,生成并展示大图。下面就来介绍一下这个实现方法。
.img-wrapper { position: relative; display: inline-block; overflow: hidden; } .img-wrapper img { display: block; width: 100%; height: 100%; } .img-wrapper:after { content: ""; display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5); z-index: 999; } .img-wrapper.active:after { display: block; } .img-wrapper.active img { opacity: .3; }
首先,需要为图片创建一个容器,可以使用div或者其他标签。本例中使用了一个class为img-wrapper的div来做容器。设置position为relative,overflow为hidden,可以使得图片在这个容器内部显示,并将超出容器的部分隐藏。
接下来,在img标签中设置width和height为100%,能够让图片充满整个容器。 而在img-wrapper容器中使用伪元素:after来生成一个黑色的半透明遮罩层,并设置z-index值为999,让其在最上层显示。
为了能够使用点击事件来显示大图,需要在.img-wrapper元素的CSS中添加以下监听代码:
.img-wrapper { cursor: pointer; } .img-wrapper.active { cursor: default; }
这个代码块会让鼠标指针变成手形,让用户知道该图片可以点击,同时在添加active类名之后,可以让光标恢复到正常状态。
最后,为元素添加点击事件代码,用来触发遮罩层的显示和隐藏:
$(".img-wrapper").on("click", function() { $(this).toggleClass("active"); });
当用户点击了.img-wrapper容器时,toggleClass方法会在点击的时候切换其active类名。这就会让遮罩层出现或消失,同时要注意,在点击完毕后需要让光标恢复到正常状态,这个可以在上述的CSS代码中实现。
粉丝
0
关注
0
收藏
0