原生js实现一个相册点击图片放大效果代码
代码语言:html
所属分类:图片放大
代码描述:原生js实现一个相册点击图片放大效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> img { max-width: 100%; height: auto; } body { padding-block: 2rem; } .gallery { display: grid; gap: 1rem; grid-template-columns: repeat(4, 1fr); grid-auto-flow: row dense; width: 90%; margin: auto; } .gallery > :nth-child(7n+1) { grid-column: span 2; grid-row: span 2; } .gallery img { display: block; aspect-ratio: 1/1; border-radius: 6px; -o-object-fit: cover; object-fit: cover; overflow: hidden; } dialog.lightbox { border: none; padding: 0; -webkit-animation: fadeIn 0.3s ease-out; animation: fadeIn 0.3s ease-out; } dialog.lightbox::-webkit-backdrop { background-color: rgba(0, 0, 0, 0.4); } dialog.lightbox::backdrop { background-color: rgba(0, 0, 0, 0.4); } dialog.lightbox img { -o-object-fit: contain; object-fit: contain; display: block; overflow: hidden; height: 100%; width: 100%; max-width: 90vw; max-width: 90dvw; max-height: 90vh; max-height: 90dvh; } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } </style> </head> <body> <div class="gallery"> <img src="//repo.bfw.wiki/bfwrepo/image/5d65ea7d8bc8b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_800,h_600,/quality,q_90" alt="" /> <img src="//repo.bfw.wiki/bfwrepo/image/61ac6310a18c5.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_800,h_600,/quality,q_90" alt="" /> <img src="//repo.bfw.wiki/bfwrepo/image/625a2405efdde.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_800,h_600,/quality,q_90" alt="" /> <img src="//repo.bfw.wiki/bfwrepo/image/625e10c281dc9.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_800,h_800,/quality,q_90" alt="" /> <img src="//repo.bfw.wiki/bfwrepo/image/627ef04e2d970.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_800,h_500,/quality,q_90" alt=.........完整代码请登录后点击上方下载按钮下载查看
网友评论0