jsjquery 点击图片 用layeropen弹出显示
您可以使用以下代码实现点击图片弹出显示的功能:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/layer/2.3/skin/layer.css">
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/layer/2.3/layer.js"></script>
</head>
<body>
<img src="image.jpg" alt="图片" id="image">
<script>
$(document).ready(function() {
$("#image").click(function() {
var imageUrl = $(this).attr("src");
layer.open({
type: 1,
title: false,
closeBtn: 1,
area: ['auto', 'auto'],
skin: 'layui-layer-nobg', //没有背景色
shadeClose: true,
content: '<img src="' + imageUrl + '" style="max-width: 100%;">'
});
});
});
</script>
</body>
</html>
这段代码首先引入了jQuery和layer的库文件。然后,在页面中添加一个图片元素,并给其设置一个id为image。接着,使用jQuery绑定了click事件,当点击图片时触发回调函数。在回调函数中,获取被点击图片的src属性值,然后调用layer.open()方法打开一个弹出层,其中content参数的值是一个包含图片标签的字符串,通过拼接imageUrl来动态设置图片的路径。最后,通过CSS样式设置弹出层图片的最大宽度为100%
原文地址: https://www.cveoy.top/t/topic/hRKZ 著作权归作者所有。请勿转载和采集!