一个简单的自己写的简陋版“灯箱效果”,不多说看代码:(自己找一下图片,路径记得改,用到jQuery)嫌js麻烦,主要想试一下实现逻辑。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>灯箱效果</title>
<style>
body{
margin: 0;
}
.box img,.box .bigImg span{
cursor: pointer;
}
.box .bigImg{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
display: none;
}
.box .bigImg img{
margin: 200px auto 0;
display: block;
}
.box .bigImg span{
font-size: 30px;
font-weight: 700;
position: absolute;
top: 200px;
right: 200px;
}
</style>
<script src="../jquery.js"></script>
</head>
<body>
<div class="box">
<img src="1.jpg" alt="" width="200">
<div class="bigImg