lightense.js实现图片点击放大缩放用法示例代码
代码语言:html
所属分类:图片放大
代码描述:lightense.js实现图片点击放大缩放用法示例代码
代码标签: lightense.js 图片 点击 放大 缩放 示例 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> @media (prefers-color-scheme: dark) { :root { --text-color-h: 213; --text-color-s: 32%; --text-color-l: 70%; --link-color-h: 202; --link-color-s: 100%; --link-color-l: 60%; --bg-color-h: 220; --bg-color-s: 10%; --bg-color-l: 12%; } } /* Basic styles */ body { color: var(--text-color); background: var(--bg-color); padding: 1vw 2vw; font-family: "Helvetica Neue", Arial, sans-serif; text-align: center; } img { width: 300px; } a { color: var(--link-color); font-weight: 600; } h2 { margin-top: 2em; } /* Example: Lazy Lightense */ .lightense-lazy { filter: blur(16px); transform: scale(1.2); } .lightense-lazy-wrap { position: relative; width: 300px; height: 115px; margin: 0 auto; } .lightense-lazy-thumb { position: relative; width: 100%; height: 100%; overflow: hidden; opacity: 1; transition: opacity 1s ease; } .lightense-lazy-large { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 1s ease; } .lightense-lazy-wrap.on .lightense-lazy-thumb { opacity: 0; } .lightense-lazy-wrap.on .lightense-lazy-large { opacity: 1; } </style> <h2>General Usage</h2> <p> <img src="//repo.bfw.wiki/bfwrepo/image/62bb8b7de9339.png" /> </p> <h2>General Usage</h2> <p> <img src="//repo.bfw.wiki/bfwrepo/image/62bb8b7de9339.png" data-lightense-background="rgba(23, 29, 54, .8)" /> </p> <h2>Disable Lightense Images with Specific Class</h2> <p> <img src="//repo.bfw.wiki/bfwrepo/image/62bb8b7de9339.png" class="no-lightense" /> </p> <h2>Custom Padding</h2> <p> <img src="//repo.bfw.wiki/bfwrepo/image/62bb8b7de9339.png" data-lightense-padding="0" /> </p> <h2>Custom Background</h2> <p> <img src="//repo.bfw.wiki/bfwrepo/image/62bb8b7de9339.png" data-lightense-background="rgba(255, 1, 180, .2)" /> </p> <h2>Custom Thumbnail Preview</h2> <p> <img src="//repo.bfw.wiki/bfw.........完整代码请登录后点击上方下载按钮下载查看
网友评论0