js 实现图片点击放大功能（组图）

最新推荐文章于 2024-06-05 10:01:56 发布

置顶 huang_cheng_zhi

最新推荐文章于 2024-06-05 10:01:56 发布

阅读量2.7k

点赞数 3

分类专栏： javascript 文章标签： js javascript

本文链接：https://blog.csdn.net/huang_cheng_zhi/article/details/107062121

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

js 实现组图点击放大功能

需求
使用到的组件或者类库
功能代码

需求

客户要求产品详情中的轮播图可以点击放大，并且放大后可以切换到其他图片

使用到的组件或者类库

layer.js
jquery

功能代码

经过一番改装，demo如下：

<!DOCTYPE html>
<html>
	<head>
		<title>image test</title>
		<script type="text/javascript" src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>
		<script type="text/javascript" src="https://cdn.staticfile.org/layer/3.1.1/layer.js"></script>
	</head>
	<body>
	<div class="img">
		<img src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2462008823,1080205429&fm=26&gp=0.jpg"/>
		<img src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1794242313,773207092&fm=26&gp=0.jpg"/>
		<img src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2533215658,320580699&fm=26&gp=0.jpg"/>
	</div>
	</body>
	<script>
		var imgs = $("img");
		imgs.click(function(){
			var that = this;
			
			layer.photos({
				photos:{
					start:imgs.index(that),//当前元素索引
					data:imgs,
				},
				anim:5
			});
		});
	</script>
</html>

huang_cheng_zhi

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
js 实现图片点击放大功能（组图）

js 实现组图点击放大功能需求实现方式探索功能代码需求客户要求产品详情中的轮播图可以点击放大，并且放大后可以切换到其他图片实现方式探索        百度了一番，发现网上实现此功能的方式多种多样，多为单图点击放大，效果不是特别好，自己实现图片切换的话会费很多力气,之前在fastadmin框架中有过点击放大图片的功能，只不过是单图的。我想，多图也可以吧。     &nbs
复制链接

扫一扫

专栏目录