点击图片放大预览，遮罩屏幕放大展示

功能说明：将图片方格展示，点击某张图片可在当前页面进行预览，点击遮罩屏幕，并且方法显示，点击右上角x，放大的图片消失。

效果图如下：

1、引入fancy.js和fancy.css

路径根据项目实际路径改写：

<link href="../static/fancybox/fancybox.css" type="text/css" rel="stylesheet"/>
<script src="../static/fancybox/fancybox.js" type="text/javascript"></script>

关于这两个文件以及其中用到的图片，我将其上传至csdn,可以下载（本想不用积分可以下载，但是编辑没找到可以自定义下载积分的。。。如果读者有需要的可以邮箱联系我：christicana@foxmail.com）：

https://download.csdn.net/download/luuvyjune/11100319

2、html片段：

<div class="container"><div class="content-box"><div class="text-box"><ul class="ul-qualification"><c:forEach items="${fn:split(article.image,'|')}" var="img" varStatus="xh"><li class="mid"><div class="img-box"><a href="${img}" class="fancybox" title="风景如画" rel="group746"><img onload="resizeImg(this, 280, 190)" src="${img}" alt=""></a></div><div class="video-title" title="风景如画">风景如画</div></li></c:forEach></ul></div></div>
</div>

2、css布局：

<style>.container .content-box {width: 100%;height: auto;/*padding-left: 180px;*/box-sizing: border-box;padding-bottom: 20px;}.container .content-box .text-box {width: 100%;height: auto;overflow: hidden;margin-top: 20px;text-align: justify;}.container .content-box .text-box ul.ul-qualification {margin: 0;padding: 0;list-style: none;}.container .content-box .text-box ul.ul-qualification li {width: 290px;height: 245px;float: left;margin-bottom: 35px;border: 1px solid #b6b2b3;box-shadow: 3px 3px 8px #999;}.container .content-box .text-box ul.ul-qualification li.mid {margin: 0 26px 35px 10px;}.container .content-box .text-box ul.ul-qualification li .img-box {width: 275px;height: 185px;box-sizing: border-box;margin: 10px auto 0 auto;}.container .content-box .text-box ul.ul-qualification li .video-title {width: 100%;height: 50px;line-height: 50px;text-align: center;font-size: 16px;color: #000;box-sizing: border-box;}</style>

3、js片段：

<script type="text/javascript">$(document).ready(function () {         $(".fancybox").fancybox();});function resizeImg(ImgID, FitWidth, FitHeight) {var image = new Image();image.src = ImgID.src;imgWidth = image.width;imgHeight = image.height;if (imgWidth > 0 && imgHeight > 0) {if (imgWidth < FitWidth && imgHeight < FitHeight) {ImgID.style.marginTop = (FitHeight - imgHeight) / 2 + "px";ImgID.style.marginLeft = (FitWidth - imgWidth) / 2 + "px";} else {if (imgWidth >= imgHeight) {//图片宽大于图片高，缩小高度var imgH = (imgHeight * FitWidth) / imgWidth;ImgID.width = FitWidth;ImgID.height = imgH;ImgID.style.marginTop = (FitHeight - imgH) / 2 + "px";} else {//图片宽小于图片高，缩小宽度var imgW = (imgWidth * FitHeight) / imgHeight;ImgID.width = (imgWidth * FitHeight) / imgHeight;ImgID.height = FitHeight;ImgID.style.marginLeft = (FitWidth - imgW) / 2 + "px";}}}}    </script>

点击图片放大预览，遮罩屏幕放大展示相关推荐

微信小程序：点击图片进行预览
在开发需求中,经常有类似与九宫格的图片展示,当点击图片时进行图片的预览,如果多图的情况还可以左右滑动. 小程序中具体实现效果如下: WXML <view class='imgList'> ...
html 缩略图点击预览,[每天进步一点点~] uni-app 点击图片实现预览图片列表
点击图片,实现预览图片功能,并且可循环预览图片列表! image.png 一.多张图片预览 html代码 js代码 data(){ return { photos:[ { src: '图片路径1'}, ...
点击图片实现预览功能
<div><div class="pj_content">包装好,不好吃</div><div><ul class=" ...
实现图片在线预览，可切换可放大缩小
想要实现点击图片可预览,能够切换下一张,能够放大和缩小,使用EZView.js这个插件即可,好用又简单. 文件下载地址: 链接:https://pan.baidu.com/s/1Cs9Kv_2GuNX ...
微信小程序：常用功能6——点击图片，实现图片的预览功能wx.previewImage(Object object, boolean showmenu)
向用户展示图片时,为了展现布局的美观性,往往不同尺寸的图片要放在相同大小的容器中. 但是图片想让用户看清.或者保存时,我们就要进行图片的预览,像用户展示原图. 图片预览接口:wx.previewIma ...
uni-app图片列表预览大图
首先确定预览是新写一个页面还是搞一个弹窗,随你,我是新开一个页面的,然后在点击图片准备预览的时候,需要的参数有: 1,当前点击图片的下标, 2,当前点击图片的列表数组点击的时候将这些参数存起来: 父 ...
微信小程序图片放大预览效果的实现，轮播图点击放大预览
近期很多刚学习小程序的同学,想做哪种图片点击放大,然后可以左右滑动预览的效果.我也特意去研究下,发现直接用微信程序自己的api就可以很方便的实现.今天就来教大家如何实现小程序图片点击放大的效果. 老规 ...
微信小程序系列——点击图片放大预览
需求开发的时候,把图片放到页面上,点击图片没有任何反应,不能放大也不能缩小这怎么能行!!! 所以需求来了:点击图片能够把图片弹出来,这样就能放大图片看细节了! 实现步骤微信提供了预览图片的接口, ...
Vue 移动端 previewer实现图片放大预览
简述本文主要讲述,vue在手机移动端如何实现对小图进行放大查看预览.类似于朋友圈的照片查看. 可用工具 1.npm安装,npm i vue-preview -S 2.使用一些Vue的UI组件框架自带 ...
微信小程序图片放大预览效果的实现
效果预览效果图有点快,但是可以大致看出来效果了.我再给大家描述下吧一个页面有3张图片,点击其中任意一张都可以放大预览.然后在预览的时候,左右滑动,还可以看另外两张图片. 话不多说,直接上代码 1, ...

点击图片放大预览，遮罩屏幕放大展示

点击图片放大预览，遮罩屏幕放大展示相关推荐

最新文章

热门文章