Javascript单击图片放大功能

最新推荐文章于 2024-01-25 12:27:20 发布

tianxinggao

最新推荐文章于 2024-01-25 12:27:20 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript div layer 框架 function

本文链接：https://blog.youkuaiyun.com/tianxinggao/article/details/1498657

本文介绍了一种使用JavaScript和HTML实现网页浮层显示的技术。通过调用show()函数可以展示一个作为背景遮罩的层（ly），同时展示包含图片的浮层（Layer）。浮层的位置和大小可以根据浏览器窗口进行自适应调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

function show(layerid){

document.all.ly.style.display="block";

document.all.ly.style.width=document.body.clientWidth;

document.all.ly.style.height=document.body.clientHeight;

document.all(layerid).style.display='block';

}

</script>

<div id="Layer<%=rsXS("Id")%>" align="center" style="position:absolute; z-index:<%=i+2%>; width: 200px; height:300px;left:expression((document.body.offsetWidth-250*<%=(3.5-i)%>)/2); top: expression((document.body.offsetHeight-350)/2);background-color:#fff;display:none;" class="img-wrapper2"><img id="photo" width="100%" height="100%" src="<%="../"&server.HTMLEncode(rsXS("PhotoPath") & "")%>" alt="<%=rsXS("Photoname")%>" onClick="document.all.ly.style.display='none';document.all.Layer<%=rsXS("Id")%>.style.display='none';" style="cursor:hand;"></div>

1、调用show()

2、show()显示隐藏的ly层,作为阴影覆盖

3、show()显示Layer层,