js经过小图显示大图简单代码（js点击小图片显示大图）

今天给各位分享js经过小图显示大图简单代码的知识，其中也会对js点击小图片显示大图进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、如何用JS/JQ实现，点击小图片显示大图片及详细信息的功能？
• 2、点击缩略图显示大图的js代码
• 3、JS 网页中点下面小图，上面显示大图
• 4、点击缩略图弹出大图效果js
• 5、用js做动态，鼠标放在小图上面会显示大图，请问怎么做？

如何用JS/JQ实现，点击小图片显示大图片及详细信息的功能？

这个一般是用css来显示特定内容的。

譬如有张图片icon.png，里面有很多内容，便可以在css中这么用。

.sa

{width:20px;

height:20px;

overflow:hidden;

background:url(icon.png)

no-repeat

-20px

-30px;}

注解：

宽度和高度是控制显示范围的

overflow:hidden是确保不会有多余显示

background:url(icon.png)是使用图片作为背景显示，并且也只能作为背景显示才能达到这种做法的目的

no-repeat是不会重复，这个不是必须的，不过有会规范一些

-20px

-30px是图片的定位，显示时会将图片按这个坐标来定位

上面只是针对固定大小的显示内容来定义的，如果大小不固定，在background属性中有可能需要更改设置。不过重点是这种方式是这么使用的。

如果大小不固定，也可以这样定义，让背景自适应：

.sa

{width:auto;

height:20px;

overflow:hidden;

background:url(icon.png)

no-repeat

right

bottom;}

对于图片2(首页标签)的内容，也是这么使用的：

.a

{width:100px;

height:25px;

overflow:hidden;

background:url(2.png)

no-repeat

left

center;}

.a:hover

{background-position:right

center;}

这样一来，当鼠标移到元素时，背景定位发生变化，显示的内容便由左边的变成右边的了。

不过你应该对css这方面还不是很了解，目前可能还没有很便捷的方式对这些css进行快速定义，所以也只能告诉你是这么一回事，但未必能帮得上你。

点击缩略图显示大图的js代码

您好：效果我感觉应该是和淘宝的宝贝页面差不多的吧？下面是小图，然后点击后上面换成对应的大图。思路：上面默认加载时候加载第一张大图，下面加载出所有的小图。给下面的所有小图加单击事件，在事件中获取想要更改上面大图的图片SRC地址，然后动态赋值给上面已经有的那个img标签的src属性上。就可以动态改变上面图片了。

JS 网页中点下面小图，上面显示大图

假设显示大图的标记为：img id="largeImage" src="" /

那么在下面小图的标记中可以这么做：

img src="xxx.jpg" onclick='document.getElementById("largeImage").src=this.src;' /

点击缩略图弹出大图效果js

js做点小图弹出大图的，一般都是分成了2份图片文件的，一种小的缩略图，一种是大的图片。

用js做动态，鼠标放在小图上面会显示大图，请问怎么做？

首先你需要在body里另写一个img并设ID，然后在那张小图的img里加一个onmouseover ="fun()" onmouseout="fun1()

js经过小图显示大图简单代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于js点击小图片显示大图、js经过小图显示大图简单代码的信息别忘了在本站进行查找喔。