图片覆盖层
初衷:很多人在初学前端的时候都会问,“如何入门前端?”
同为在前端学习道路上,奋力追赶的一员,本人对于目前网络上所能看到的 “入门级” 的教材并不太满意。学习一门新知识,实例是尤其重要的。在这里本人整理了目前页面上常见功能实现的具体实例。愿能为大家提供一些帮助。
希望能够与大家互相分享,共同进步。
效果预览
HTML 部分
<h2>图片覆盖层</h2>
<select id="mySelect">
<option value="overlayFadeIn">渐显</option>
<option value="overlaySlideInTop">从上滑入</option>
<option value="overlaySlideInBottom">从下滑入</option>
<option value="overlaySlideInRight">从右滑入</option>
<option value="overlaySlideInLeft">从左滑入</option>
</select>
<div class="container">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
<div class="overlayFadeIn" id="overlay">
<div class="text">Hello World</div>
</div>
</div>
CSS 部分
#mySelect {
font-size: 16px;
text-align: center;
}
.container {
position: relative;
width: 30%;
}
.image {
display: block;
width: 100%;
}
.overlayFadeIn {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlayFadeIn {
opacity: 1;
}
.overlaySlideInTop {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height:0;
transition: .5s ease;
}
.container:hover .overlaySlideInTop {
bottom: 0;
height: 100%;
}
.overlaySlideInBottom {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.container:hover .overlaySlideInBottom {
height: 100%;
}
.overlaySlideInRight {
position: absolute;
bottom: 0;
left: 100%;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.container:hover .overlaySlideInRight {
width: 100%;
left: 0;
}
.overlaySlideInLeft {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.container:hover .overlaySlideInLeft {
width: 100%;
}
.text {
color: white;
font-size: 20px;
position: absolute;
white-space: nowrap;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
JavaScript 部分
这部分代码只为展示方便而用,不需考虑。
(function() {
var mySelect = document.getElementById('mySelect');
overlay = document.getElementById('overlay');
mySelect.onchange = function(e) {
overlay.className = e.target.value;
}
})();
好啦,现在所有的代码都写完啦!
赶快打开浏览器,看看效果吧!
在这里,只是给大家提供一种思路,参考。
具体的实现,每个人都可以有不同的方法。
请大家赶快发挥想象,把你最想实现的功能,在电脑敲出来吧!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。