点击图片实现放大预览（网页/Flutter）

布局（就是一张图片）：

点击：

function showBigPic(ret) {
		var src = ret.getAttribute("src");
		api.openFrame({
			name : 'pic_detail',
			url : 'pic_detail.html',
			rect : {
				x : 0,
				y : 0,
				w : 'auto',
				h : 'auto'
			},
			bounces : false,
			bgColor : 'rgba(0,0,0,0.4)',
			pageParam : {
				url : src//参数传递
			}
		});
	}

在新的Frame中引入js，接收url并显示即可：
核心代码：
设置显示样式：

html, body {
		height: 100%;
		background: transparent;
	}
	.content {
		background: transparent;
		position: absolute;
		display: -webkit-box;
		-webkit-box-pack: center;
		-webkit-box-align: center;
		height: 100%;
		width: 100%;
	}
	.content img {
		width: 100%;
	}



	

		
	
  

$api.byId("show").src = api.pageParam.url;

用到的hammer.js和hammerPluin.js地址：https://download.csdn.net/download/androidstudioo/10323545
————————————————————————————————————————————————————
再说一下flutter中的实现方式，主要借助两个插件：swiper和photo_view，当点击图片的时候，我们以dialog的方式，弹出图片预览层。代码如下：

onTap: (index) {
     List picList = List();
     picList.add("http://pic11.nipic.com/20101201/4224370_043416094739_2.jpg");
     picList.add( "http://pic13.nipic.com/20110319/6787586_095428838000_2.jpg");
     showDialog(
             context: context,
             builder: (context) {
                 return PicPreView(
                    picList: picList,
                    index: 0,//图片下标，默认从第一页显示
                  );
             });  
     },

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:photo_view/photo_view.dart';

class PicPreView extends Dialog {
  final List picList;
  final int index;

  PicPreView({@required this.picList, this.index = 0});

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Container(
        width: double.infinity,
        height: double.infinity,
        color: Colors.black,
        child: Swiper(
          itemWidth: double.infinity,
          itemHeight: double.infinity,
          itemCount: picList?.length,
          index: index,
          pagination: SwiperPagination(),
          autoplay: false,
          loop: false,
          itemBuilder: (context, index) {
            return InkWell(
              onTap: () {
                Navigator.pop(context);
              },
              child: PhotoView(
                imageProvider: picList[index].toString().startsWith("http")
                    ? NetworkImage(
                        picList[index],
                      )
                    : Image.file(
                        File(picList[index]),
                      ),
              ),
            );
          },
        ),
      ),
    );
  }
}