原生js实现分割拖动前景与后景效果
代码语言:html
所属分类:选择器
代码描述:原生js实现分割拖动前景与后景效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { padding: 0; margin: 0; } main { width: 100vw; height: 100vh; display: grid; place-items: center; } p { width: 600px; } split-view { width: 600px; height: 400px; } </style> </head> <body translate="no" > <main> <div> <h1>Split View</h1> <split-view> <picture slot="top"> <img src="//repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_600,h_400,/quality,q_90" /> </picture> <picture slot="bottom"> <img src="//repo.bfw.wiki/bfwrepo/image/5d65ea7d8bc8b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_600,h_400,/quality,q_90" /> </picture> </split-view> <p>Split View is an open source image comparion web component. See more information and source at <a href="https://github.com/onion2k/split-view" target="_BLANK">https://github.com/onion2k/split-view</a></p> <h2>Usage</h2> <pre> <split-view> <picture slot="top"> <img src="https://source.unsplash.com/600x400/?day" alt="Day" /> </picture> <picture slot="bottom"> <img src="https://source.unsplash.com/600x400/?night" alt="Night" /> </picture> </split-view> </pre> </div> </main> <script> let tmpl = document.createElement("template"); tmpl.innerHTML = ` <style> :host { display: block; } :hos.........完整代码请登录后点击上方下载按钮下载查看
网友评论0