原生js实现分割拖动前景与后景效果-html代码-BFW代码库

原生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>      &lt;split-view&gt;
        &lt;picture slot="top"&gt;
          &lt;img src="https://source.unsplash.com/600x400/?day" alt="Day" /&gt;
        &lt;/picture&gt;
        &lt;picture slot="bottom"&gt;
          &lt;img src="https://source.unsplash.com/600x400/?night" alt="Night" /&gt;
        &lt;/picture&gt;
      &lt;/split-view&gt;
    </pre>
  </div>
</main>

  
  
      <script>
let tmpl = document.createElement("template");
tmpl.innerHTML = `
  <style>
    :host {
      display: block;
    }
    :hos.........完整代码请登录后点击上方下载按钮下载查看