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

最新推荐文章于 2024-04-09 22:13:50 发布

小言同学Y

最新推荐文章于 2024-04-09 22:13:50 发布

阅读量5.3k

点赞数 9

分类专栏： Java web 基础学习文章标签： jquery css html

本文链接：https://blog.csdn.net/m0_50925590/article/details/122203466

版权

Java web 基础学习专栏收录该内容

10 篇文章 6 订阅

订阅专栏

一、题目

在页面中有四幅小图片和一个图片展示区域，当鼠标移入某幅小图片时，在图片展示区域可看到其对应的大图。为凸显当前的小图状态，把其它三幅小图透明度设为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、此题如果有错误，希望提出，谢谢。

六、jquery-3.5.1的下载链接

jquery-3.5.1

小言同学Y

关注

9
点赞
踩
82

收藏

觉得还不错? 一键收藏
打赏
2
评论
html+css+jquery制作图片展示效果

一、题目在页面中有四幅小图片和一个图片展示区域，当鼠标移入某幅小图片时，在图片展示区域可看到其对应的大图。为凸显当前的小图状态，把其它三幅小图透明度设为0.2，如图所示：二、设计思路及步骤1.首先设计页面HTML结构，应用CSS样式。2.为四幅小图片绑定鼠标移入事件。3.获取当前发生鼠标移入事件的小图片的src属性，将其作为大图的src属性值。这样大图也就随之改变了。4.为凸显当前的小图状态，改变其余图片的透明度。如：把其它三幅小图透明度设为0.2。三、代码实现1、图片
复制链接

扫一扫