首页 > 其他 > 详细

巧用weui.gallery(),点击图片后预览图片

时间:2017-01-14 19:50:00      阅读:304      评论:0      收藏:0      [点我收藏+]

要在页面需要加载的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();
})

技术分享技术分享

巧用weui.gallery(),点击图片后预览图片

原文:http://www.cnblogs.com/baiyygynui/p/6285910.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!