js 实现图片点击放大功能（组图）
程序员文章站
2024-03-20 21:01:22
...
需求
客户要求产品详情中的轮播图可以点击放大，并且放大后可以切换到其他图片
实现方式探索
百度了一番，发现网上实现此功能的方式多种多样，多为单图点击放大，效果不是特别好，自己实现图片切换的话会费很多力气,之前在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>
下一篇： MySql之主从复制