jquery实现点击缩略图在弹出层显示原图功能

本文主要是介绍jquery实现点击缩略图在弹出层显示原图功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

这里使用了layer弹出组件。官方网址：http://layer.layui.com/

第一种方法代码如下：

var img = new Image();img.src = $("#jiaoguitu").attr("src");  var imgHtml = "<img src='" + $("#jiaoguitu").attr("src") + "' />";//捕获页layer.open({type: 1,shade: false,title: false, //不显示标题//area:['600px','500px'],area: [img.width + 'px', img.height+'px'],content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响cancel: function () {//layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });}});

第二种方法代码如下：

     var img = "<img src='" + $("#jiaoguitu").attr("src") + "' />";//捕获页layer.open({type: 1,shade: false,title: false, //不显示标题//area:['600px','500px'],area: [img.width + 'px', img.height+'px'],content: img, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响cancel: function () {//layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });}});

这篇关于jquery实现点击缩略图在弹出层显示原图功能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---