一、题目

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

html+css+jquery制作图片展示效果相关推荐

如何用Jquery做图片展示效果
一. 前言到底用JQuery做出怎样的展示效果? 让我们先来看一下!网页加载时,如图所示: 二.本人思路这个效果初学者看起来好像有点复杂,其实不太难,关键是理清思路,从后端的数据库中找出我们要展示 ...
div 隐藏_CSS实现六边形Div图片展示效果
一. 效果图二. 六边形效果涉及到的知识点 1. transform: rotate(120deg); // 元素旋转 2. overflow: hidden; // 超出隐藏 3. visibil ...
15款JQuery图片展示效果插件
在图片展示的效果中,滑动门和幻灯片放映在这几年的web页面中越来越流行了,随着jQuery的流行趋势渐增,更多的开发者都致力于创建惊人的,多用途的,时髦的jquery图片展示效果.真的要感谢jQuer ...
Revealing图片展示效果（jQuery）
Revealing图片展示效果(jQuery),单击"更多信息"按钮,图片的缩略图将展现为全尺寸图片和附加信息,兼容主流浏览器,懒人图库推荐下载! 使用方法: 1.head区域引用 ...
小猿圈用jQuery实现手风琴图片展示效果
对web前端了解的同学会知道jQuery是现在前端中使用的框架之一,但是你知道jQuery可以做到一些你意想不到的效果吗?下面小猿圈web前端老师用jQuery实现手风琴图片展示效果,希望对你有所帮助 ...
jQuery实例：图片展示效果
原文地址为: jQuery实例:图片展示效果开始之前,我就喜欢先看一下效果: 张娜拉,韩国的 My Digital Story 不知道是什么图来的我的Logo,Studio拼错了都不知道,汗一个. ...
css 风琴,玩一下纯 CSS 折腾的一个叫什么手拉风琴的图片展示效果
原标题:玩一下纯 CSS 折腾的一个叫什么手拉风琴的图片展示效果好久没更新的公众号终于更新了,但没有太多内容,主要是也不知道写什么,更关键是已经很久没有写 CSS 的东西了,中午没吃到鸡,就一边观战 ...
css图片6边形,CSS3 实现六边形Div图片展示效果
一. 效果图二. 原理讲解这个效果用到的主要知识点 : 1. transform: rotate(120deg); 图片旋转 2. overflow: hidden; 超出隐藏 3. visibi ...
php js 图片旋转,jQuery制作图片旋转效果
以前用JQuery写过一个纵深方向上的图片旋转效果,在这里拿出来跟大家分享下,贴上一张图片看看效果是如何的: 其实现原理并不复杂,在数学上只用到了其中的正弦函数,制作过程大致如下: (1)先定义好图片 ...
《Hexo: 从零开始编写自己的主题》4. fancybox优化图片展示效果、代码高亮以及数学公式
<Hexo: 从零开始编写自己的主题> 1. Hexo概述以及Hexo工作原理 2. 入门Hexo主题编写 3. 优化样式,设计自己的主题 4. fancybox优化图片展示效果.代码高亮 ...

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