js 实现图片点击放大功能(组图)

js 实现组图点击放大功能

  • 需求
  • 实现方式探索
  • 功能代码

需求

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

实现方式探索

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

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如下:

<!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>

你可能感兴趣的:(javascript,js,javascript)