JQUERY简单实现点击图片放大效果

最新推荐文章于 2021-10-26 10:46:54 发布

北寻

最新推荐文章于 2021-10-26 10:46:54 发布

阅读量910

点赞数

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/sinat_40751643/article/details/120795662

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本地新建个html，复制以下代码，浏览器打开看效果

<!DOCTYPE html>
<html lang="zh-cn">
<head>
   <meta charset="utf-8">
   <title>Lightbox</title>
   <meta name="description" lang="en" content="Lightbox is a script used to overlay images on the current page. It's a snap to setup and works on all modern browsers."/>
   <meta name="author" content="Lokesh Dhakar">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
   <style type="text/css">
.fillbg { background-color: rgba(0, 0, 0, 0.6); bottom: 0; height: 100%; left: 0; opacity: 0; position: fixed; right: 0; top: 0; width: 100%; z-index: 1100; display:none; }
.fillbg-active { opacity: 1; display:block; }
   </style>
</head>
<body>

</body>
</html>

$(".bgImg").bind("click", function(){
$(".fill-input").removeClass("fill-input-active");
setTimeout(function(){
$(".fillbg-active").removeClass("fillbg-active");
$(".fillbg").remove();
},300);
$('.bgImg').css({'width': '0px','height': '0px'});
$('.bgImg').attr("src",'');
});
});
</script>

北寻

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JQUERY简单实现点击图片放大效果

<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8"> <title>Lightbox</title> <meta name="description" lang="en" content="Lightbox is a script used to overlay images on the current page. It's...
复制链接

扫一扫