一、题目
在页面中有四幅小图片和一个图片展示区域,当鼠标移入某幅小图片时,在图片展示区域可看到其对应的大图。为凸显当前的小图状态,把其它三幅小图透明度设为0.2,如图所示:
二、设计思路及步骤
1.首先设计页面HTML结构,应用CSS样式。
2.为四幅小图片绑定鼠标移入事件。
3.获取当前发生鼠标移入事件的小图片的src属性,将其作为大图的src属性值。这样大图也就随之改变了。
4.为凸显当前的小图状态,改变其余图片的透明度。如:把其它三幅小图透明度设为0.2。
三、代码实现
1、图片展示.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片展示</title>
<link href="图片展示.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery-3.5.1.min.js"></script>
<script src="图片展示.js"></script>
</head>
<body>
<div id="i1">
<div id="i2">
</div>
<div id="i3">
<div class="d1"><img src="1.jpg" class="c1" /></div>
<div class="d1"><img src="2.jpg" class="c1" /></div>
<div class="d1"><img src="3.jpg" class="c1" /></div>
<div class="d1"><img src="4.jpg" class="c1" /></div>
</div>
</div>
</body>
</html>
2、图片展示.css
@charset "utf-8";
/* CSS Document */
#i1{
margin: auto;
border: 1px solid white;
width: 700px;
height:700px;
}
#i2{
margin: auto;
border: 1px solid white;
width: 600px;
height:340px;
}
#i3{
margin: auto;
text-align: center;
margin-top: 20px;
border: 1px solid white;
width: 600px;
height:50px;
}
.c1{
width: 50px;
height:50px;
border-radius: 6px;
opacity: 0.2;
}
.d1{
float:left;
margin-right: 40px;
margin-left: 50px;
}
3、图片展示.js
// JavaScript Document
$(document).ready(function(){
$(".c1").mouseover(function(){
$(this).css({
"opacity": "1"
});
$("#i2").append("<img src='"+$(this).attr("src")+"'id='pic'>");
$("#pic").css({
"width":"600px",
"border-radius": "10px",
});
$(".c1").mouseout(function(){
$(".c1").css({
"opacity": "0.2"
});
$("#pic").remove();
});
});
});
四、效果展示
五、总结
1、在代码中我所使用的路径的:相对路径;
2、要使用jQuery,一定要先下载JavaScript的库文件(也就是:jquery-3.5.1,没有版本要求);
3、用html+css写出结构并不难,主要是了解如何用jQuery去动态的进行操作。
4、此题我没有写注释,如有不懂可评论中提出;或者需要注释,我也可以写上;
5、此题如果有错误,希望提出,谢谢。