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

时间 2020-08-05 标签实现图片点击放大功能组图

js 实现组图点击放大功能

需求

客户要求产品详情中的轮播图能够点击放大，而且放大后能够切换到其余图片javascript

实现方式探索

百度了一番，发现网上实现此功能的方式多种多样，多为单图点击放大，效果不是特别好，本身实现图片切换的话会费不少力气,以前在fastadmin框架中有过点击放大图片的功能，只不过是单图的。我想，多图也能够吧。
通过一番查找，在require-tables.js中找到了该功能的实现方式。确实能够实现多图放大。具体以下：html

image: {
   'click .img-center': function (e, value, row, index) {
       var data = [];
       value = value.toString().split(",");
       $.each(value, function (index, value) {
           data.push({
               src: Fast.api.cdnurl(value),
           });
       });
       Layer.photos({
           photos: {
               "start": $(this).parent().index(),
               "data": data
           },
           anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0以前的版本用shift参数）
       });
   },
}

功能代码

通过一番改装，demo以下：java

<!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="test1.jpg"/>
		<img src="test2.png"/>
		<img src="test3.png"/>
	</div>
	</body>
	<script>
		$(".img img").click(function(){
			var that = this;
			var index = 0;
			var data = [];

			$.each($(this).parent().children("img"),function(i,value){
				if(that.==value)
				{
					index = i; //获取索引
				}
				data.push({src:value.getAttribute('src')});
			})

			layer.photos({
				photos:{
					start:index,//当前元素索引
					data:data,
				},
				anim:5
			});
		});
	</script>
</html>