巧用weui.gallery(),点击图片后预览图片
要在页面需要加载的JS文件:
<script src="../js/libs/weui.min.js"></script>
可以去weui的文档中下载,这是它的demo: https://weui.io/weui.js/
要先给图片创建一个节点:
var imgDom = $("<img class='weui-jiaj-img' />");
因为接口中取到的图片会是很多,因此,在循环图片数据的时候,要给每个图片添加一个动态的class
for(var i = 0; i < data.length; i++){
imgDom.addClass('img-' + i);
.....
}
给每个节点的src属性添加获致到的img地址
imgDom.attr('src', problem_img);
最后把这个节点添加到页面的某个div下面
seePanel.find('.answer-img').append(imgDom);
点击图片时,需要先找到这个图片的节点,使用weui.gallery(img地址),弹出图片并预览
var imgDiv = seePanel.find('.answer-img');
imgDiv.find('.img-' + i).on('click',function(){
weui.gallery(problem_img);
$('.weui-gallery__del').remove();
})


如果你认为此时,预览图片OK的话,就太早了,
weui.gallery(imgUrl); weui.gallery()方法在预览图片时,会把当前imgUrl地址写入span内部,必须要清除span内部的这个url才算完。
最后应该要加上这句:
//点击图片预览这是我写的,这个不要动
$('.js_container').on('click','.weui-jiaj-doctor-img',function(){
//取item属性出来
var item = $(this).attr('img-item');
if(item) item = JSON.parse(item); var imgUrl = item.imgUrl;
weui.gallery(imgUrl);
$('.weui-gallery__del').remove();
//去掉span中的字符串,要加上这句
$('.weui-gallery span').html('');
})
巧用weui.gallery(),点击图片后预览图片的更多相关文章
- JS实现图片base64转blob对象,压缩图片,预览图片,图片旋转到正确角度
base64转blob对象 /** 将base64转换为文件对象 * @param {String} base64 base64字符串 * */ var convertBase64ToBlob = f ...
- html选择图片后预览,保存并上传
html代码:------------------添加-------------------------- accept="image/gif,image/jpeg,image/jpg,im ...
- js实现FileUpload选择图片后预览功能
当asp.net的FileUpload选择一个图片后不需要上传就能显示出图片的预览功能, 代码: <%@ Page Language="C#" AutoEventWireup ...
- input file选择图片后 预览
很多前端都选择用插件来实现图片预览,这个小功能也可以很简单的用jQuery来实现 简单的jQuery实现input file选择图片后,可以预览图片的效果 简单的HTML代码: <div> ...
- file上传图片,base64转换、压缩图片、预览图片、将图片旋转到正确的角度
/** * 将base64转换为文件对象 * (即用文件上传输入框上传文件得到的对象) * @param {String} base64 base64字符串 */ function convertBa ...
- type="file" 选择图片后预览
function setImagePreview(avalue) { var docObj = document.getElementById("doc"); var imgObj ...
- Android:UI 沉浸式体验,适合第一屏的引导图片、预览图片。
链接:http://www.cnblogs.com/liushilin/p/5799381.html
- 微信小程序:点击预览图片
在开发微信小程序时,开发人员会参考着小程序api来开发小程序,但有的时候根据情况不同很容易出现bug,以下是我在开发小程序时出现的各种bug,在开发时有需要预览图片. 1.xml <view c ...
- 微信小程序点击图片放大预览
微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{ ...
随机推荐
- SSIS如何引用外部DLL
原文:SSIS如何引用外部DLL 当SSIS引用外部的DLL时,外部的DLL须满足以下条件: 1. DLL是强命名. 2. 加入到GAC (C:\WINDOWS\assembly),直接把DLL拉进目 ...
- 使用JasperReport+iReport进行Web报表开发
使用JasperReport+iReport进行Web报表开发 前言 在实际工程中非常,报告是其中很重要的一部分,结果以报表的形式呈现出来.这里所提到的报表可不是简单的二维表,而是拥有复杂表头的.多维 ...
- serialVersionUID行动
ORIGINAL:未知 Java断类的serialVersionUID来验证版本号一致性的.在进行反序列化时,JVM会把传来的字节流中的serialVersionUID与本地对应实体(类)的seria ...
- validate的使用
日期和时间验证或者按照指定的格式进行验证,或者使用的标准格式指定的区域设置. 日期验证 - 验证日期转换为java.util.Date的类型. 日历验证 - 验证日期转换为java.util.Cale ...
- 根据首尾字节的tcp分包断包算法
这个算是我的一点小总结吧,放出来分享给大家,原来在网上找这种算法都找了N久没找到,自己写也是走了许多弯路,就放出来遛一遛吧 大家将就这个看看, 这是其中的一个主要的方法,其余的我就不放出来了,其中的I ...
- C# 学习笔记2 C#底层的一些命令运行
C#在DCP中运行的方法: 1.转到相应的目录 cd d:\1 2.输入csc /target:exe 2.cs 或者 csc /t:exe 2.cs 或者 csc 2.cs 在里边引用外部程序集的方 ...
- 释放c盘空间
Win7的系统引导盘用着用着会越来越小.怎么办呢?我以前在网上查过资料,说是找个工具加大C盘.我加了,从原来的20G加到现在的35G.用了一段时间后,空间又只剩几百M了.难道又要加?? 后来,在网上找 ...
- U盘安装Win7
声明:本方法仅仅适用于windows 7 的安装. 工具准备: 1.网上下载一个windows 7 系统.最好是纯净版的,非Gost 版.虽然装机慢了一些,但到用时就体会到他的流畅. 2.Window ...
- 列表类型转换(ConvertList<TSource, TResult>)
性能优化-列表类型转换(ConvertList<TSource, TResult>) 2013-12-16 16:55 by stevey, 426 阅读, 7 评论, 收藏, 编辑 之前 ...
- Jenkins中关于一些插件的使用
Jenkins中关于一些插件的使用方法 最近在为公司搭建CI平台过程中,以及在具体项目实施过程中使用过的一些插件的具体用法: 1. ant插件 这个插件可能是我们最为经常使用的,若构建脚本是使用bui ...