触屏查看大图（可以缩放）

1.less(如果需要less的，可以拿过去，如果不需要，只要引入css即可)

.pl_mainLi-RcImgList .pl_mainLi-RcImg:first-child{z-index: 1;
}
.pl_mainLi-RcImg {width: 100%;height: 100%;position: absolute;left: 0;top: 0;
}
.pl_mainLi-RcImgList {width: 4.7rem;height: 4.7rem;margin-top: 0.375rem;position: relative;
}//查看原图弹窗
.pl_picPreview{position: fixed;top: 0;left: 0;z-index: 999;width: 100%;height: 100%;background-color: #333;.pl_picPreview__close {position: absolute;top: 20/40rem;right: 20/40rem;z-index: 2;width: 50/40rem;height: 50/40rem;background: url(data:image/png;base64,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) right top no-repeat;background-size: 40/40rem 40/40rem;}
}
.pl_picPreview__bd {height: 100%;.swiper-container {width: 100%;height: 100%;.swiper-slide {overflow: hidden;img {max-width: 100%;max-height: 100%;}}.swiper-pagination-fraction {top: 20/40rem;left: 50%;bottom: inherit;margin-left: -110/2/40rem;width: 110/40rem;height: 50/40rem;line-height: 50/40rem;font-size: 28/40rem;color: #f7f7f7;background-color: rgba(0,0,0,.5);border-radius: 50/40rem;}}
}.hide {display: none !important;
}

2.编译后的css

.pl_mainLi-RcImgList .pl_mainLi-RcImg:first-child {z-index: 1;
}
.pl_mainLi-RcImg {width: 100%;height: 100%;position: absolute;left: 0;top: 0;
}
.pl_mainLi-RcImgList {width: 4.7rem;height: 4.7rem;margin-top: 0.375rem;position: relative;
}
.pl_picPreview {position: fixed;top: 0;left: 0;z-index: 999;width: 100%;height: 100%;background-color: #333;
}
.pl_picPreview .pl_picPreview__close {position: absolute;top: 0.5rem;right: 0.5rem;z-index: 2;width: 1.25rem;height: 1.25rem;background: url(data:image/png;base64,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) right top no-repeat;background-size: 1rem 1rem;
}
.pl_picPreview__bd {height: 100%;
}
.pl_picPreview__bd .swiper-container {width: 100%;height: 100%;
}
.pl_picPreview__bd .swiper-container .swiper-slide {overflow: hidden;
}
.pl_picPreview__bd .swiper-container .swiper-slide img {max-width: 100%;max-height: 100%;
}
.pl_picPreview__bd .swiper-container .swiper-pagination-fraction {top: 0.5rem;left: 50%;bottom: inherit;margin-left: -1.375rem;width: 2.75rem;height: 1.25rem;line-height: 1.25rem;font-size: 0.7rem;color: #f7f7f7;background-color: rgba(0, 0, 0, 0.5);border-radius: 1.25rem;
}
.hide {display: none !important;
}

3.html

<!DOCTYPE html>
<html><head><head><meta http-equiv="Content-Type" content="text/html" charset="utf-8"><title>大图</title><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"><link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/Swiper/4.4.6/css/swiper.css"/><link rel="stylesheet" type="text/css" href="css/1.css"/><script type="text/javascript">(function(doc, win) {var docEl = doc.documentElement,resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',recalc = function() {var clientWidth = docEl.clientWidth;if(!clientWidth) return;if(clientWidth > 768) {docEl.style.fontSize = '40px';return;}docEl.style.fontSize = 20 * (clientWidth / 375) + 'px';};if(!doc.addEventListener) return;win.addEventListener(resizeEvt, recalc, false);doc.addEventListener('DOMContentLoaded', recalc, false);})(document, window);</script></head></head><body><div class="pl_mainLi-RcImgList"><img class="pl_mainLi-RcImg" src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/5.jpg"><img class="pl_mainLi-RcImg" src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/1.jpg"><img class="pl_mainLi-RcImg" src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"></div><!--查看大图--><div class="pl_picPreview hide"><div class="pl_picPreview__close"></div><div class="pl_picPreview__bd"><div class="swiper-container"><div class="swiper-wrapper"></div><div class="swiper-pagination"></div></div></div></div>       <div class="swiper-slide swiper-slide-template hide"><div class="swiper-zoom-container"><img class="swiper-lazy" src=""></div></div><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js" type="text/javascript" charset="utf-8"></script><script src="https://cdn.bootcss.com/Swiper/4.4.6/js/swiper.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">           /******查看大图******/var __preview = $('.pl_picPreview'),__swiperWrap = $('.pl_picPreview .swiper-wrapper'),__swiperPagination = $('.pl_picPreview .swiper-pagination'),__swiper = new Swiper('.pl_picPreview .swiper-container', {initialSlide: 0,zoom: true,pagination: {el: '.swiper-pagination',type: 'fraction'}});function pl_renderSwiper(imgArr,index) {__swiperWrap.html('');__swiperPagination.removeClass('hide');for (var i = 0; i < imgArr.length; i++) {var __temp = $('.swiper-slide-template').clone(true).removeClass('swiper-slide-template hide');__temp.find('.swiper-lazy').attr('src',imgArr[i]);__swiperWrap.append(__temp);}__preview.removeClass('hide');__swiper.slideTo(index, 1000, false);__swiper.update();}//关闭大图弹窗$('.pl_picPreview__close').click(function(){__preview.addClass('hide');});//列表大图$('.pl_mainLi-RcImgList img').click(function(){var imgArr = [],_par = $(this).parents('.pl_mainLi-RcImgList'),index = $(this).index();_par.find('img').each(function(){imgArr.push($(this).attr('src'));});pl_renderSwiper(imgArr,index);});</script></body>
</html>

4.效果（在手机端可以缩放图片）

触屏查看大图（可以缩放）相关推荐

[Android] 触屏setOnTouchListener实现图片缩放、移动、绘制和添加水印
前一篇文章讲述了Android实现图片Matrix矩阵类缩放.旋转.对比度.亮度.饱和度处理,但是真正的图片软件都是使用触屏实现图片缩放.移动.添加水印等功能,所以该篇文章主要通过setOnT ...
html点击小图标显示全屏查看大图,基于JavaScript实现移动端点击图片查看大图点击大图隐藏...
一.需求点击图片查看大图,再点大图隐藏.多用于移动端,因为移动端屏幕小,可能需要查看大图. 二.代码 JQuery点击图片查看大图by starof .exampleImg { height:100 ...
H5 查看大图。缩放图片
之前前前后后找了很多类似的JS库,都非常的优秀,比如 viewerjs 或者其他. 然而这些JS库都太厉害了.封装的功能也是太多了,最重要的是这个库放大的图片. 并不能满屏,只能以实际上传的图片大小来 ...
仿微信QQ查看大图缩放动画
今天来写一篇关于点击小图查看大图的缩放动画的文章,效果图如下所示: 先来讲一下实现的思路:看到这个效果图,想都不用想就知道用属性动画或者补间动画通过缩放.位移.改变透明度来实现.首先点击小图会跳转到另 ...
tomcat开机自启动--》自动打开浏览器，打开系统首页--》浏览器默认全屏，禁用浏览器缩放、手势、左右滑动
1.tomcat开机自启动 (1)加入系统启动项或系统计划任务 (2)建系统服务,设置服务为开机自启动 (windows) 命令行进入tomcat bin 文件夹 service.bat inst ...
微信小程序——焦点图可预览查看大图缩放（多张可左右滑动）带页码 loading 加载中 / https不显示图
微信小程序焦点图,可以滑动预览大图缩放微信小程序自带焦点图swiper ,但是没有页码,只有小圆点,所以要自己写 (在查看大图时遇到一个问题,安卓上查看大图部分图不显示,经排查,发现不显示的图片地址 ...
Unity 触屏手势控制Camera平移旋转缩放
Unity 触屏手势控制Camera平移旋转缩放实现思路单点触屏,位移增量控制相机平移: 两点触屏,两点位移控制相机前后移动(缩放):两点中一点不位移控制相机绕点旋转: 实现需要的API Touc ...
手机html图片自动滚动,html5手机触屏滑动图片下一张查看特效
特效描述:html5 手机触屏滑动图片下一张查看特效.html5图片下一张查看代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Hungry cat 6 Whatever Hung ...
手机看html网页内容重叠,html5手机端叠加图片触屏滑动查看特效
特效描述:html5手机端叠加图片触屏滑动查看特效.html5手机叠加图片手指滑动查看代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 rutrum tellus a tempus ...
微博html5版什么手机,搜狐微博推出全新手机HTML5触屏版
近日,搜狐微博全力推出手机微博触屏版(w.sohu.com/m),该版采用最新HTML5技术,全新的视觉设计,让你在网页上享受超越客户端的用户体验. HTML5是一种技术标准,被业界视为未来移动应用的 ...

触屏查看大图（可以缩放）

触屏查看大图（可以缩放）相关推荐

最新文章

热门文章