html+css+jquery制作图片展示效果

一、题目

在页面中有四幅小图片和一个图片展示区域，当鼠标移入某幅小图片时，在图片展示区域可看到其对应的大图。为凸显当前的小图状态，把其它三幅小图透明度设为0.2，如图所示：

二、设计思路及步骤

1.首先设计页面HTML结构，应用CSS样式。

2.为四幅小图片绑定鼠标移入事件。

3.获取当前发生鼠标移入事件的小图片的src属性，将其作为大图的src属性值。这样大图也就随之改变了。

4.为凸显当前的小图状态，改变其余图片的透明度。如：把其它三幅小图透明度设为0.2。

三、代码实现

1、图片展示.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("");
		$("#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、此题如果有错误，希望提出，谢谢。

六、jquery-3.5.1的下载链接 

jquery-3.5.1