abstract：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JQuery垂直三級導航</title> &n
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery垂直三級導航</title>
<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">
<style type="text/css">
.box{
width: 900px;
height: 700px;
background: lightgreen;
margin: 0 auto;
border-radius: 4px;
}
.pic{
width: 300px;
height: 200px;
margin: 100px auto;
float: left;
}
.pic img{
border-radius: 6px;
transition: all 0.5s; /* 定義圖片放大過程的秒數 */
}
.pic:hover img{
height: 200px;
width: 300px;
transform: scale(1.5);
box-shadow: 1px 10px 10px hotpink;
border: 4px dashed #616161;
}
</style>
<script>
</script>
</head>
<body style="background: #eee;">
<div class="box">
<div class="pic">
<img src="08.jpg" width="300" height="200">
</div>
<div class="pic">
<img src="08.jpg" width="300" height="200">
</div>
<div class="pic">
<img src="08.jpg" width="300" height="200">
</div>
<div class="pic" style="margin: 0px auto;">
<img src="08.jpg" width="300" height="200">
</div>
<div class="pic" style="margin: 0px auto;">
<img src="08.jpg" width="300" height="200">
</div>
<div class="pic" style="margin: 0px auto;">
<img src="08.jpg" width="300" height="200">
</div>
</div>
</body>
</html>
Correcting teacher：天蓬老師Correction time：2019-05-24 13:43:41
Teacher's summary：這類圖片放大技術, 現(xiàn)在已經有了不少成熟的插件來解決, 當然了解它的原理, 還是有必要的