html 分屏滑块

Posted 2021-05-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 分屏滑块相关的知识，希望对你有一定的参考价值。

body{
    margin:0;
    padding:0;
    font-size:100%;
    line-height: 24px;
    font-family: Arial, Helvetica, sans-serif;
  }
  
  #wrapper{
    position: relative;
    width:100%;
    min-height:55vw;
    overflow: hidden;
  }
  
  .layer{
    position: absolute;
    width:100vw;
    min-height: 55vw;
    overflow: hidden;
  }
  
  .layer .content-wrap{
    position: absolute;
    width:100vw;
    min-height: 55vw;
  }
  
  .layer .content-body{
    width:25%;
    position:absolute;
    top:50%;
    text-align: center;
    transform:translateY(-50%);
    color:#fff;
  }
  
  .layer img{
    position: absolute;
    width:35%;
    top:50%;
    left: 50%;
    transform:translate(-50%, -50%);
  }
  
  .layer h1{
    font-size:2em;
    line-height: 44px;
  }
  
  .bottom{
    background:#222;
    z-index:1;
  }
  
  .bottom .content-body{
    right:5%;
  }
  
  .bottom h1{
    color:#FDAB00;
  }
  
  .top{
    background:#eee;
    color:#222;
    z-index:2;
    width:50vw;
  }
  
  .top .content-body{
    left: 5%;
    color:#222;
  }
  
  .handle{
    position: absolute;
    height: 100%;
    display: block;
    background-color: #FDAB00;
    width:5px;
    top:0;
    left: 50%;
    z-index:3;
  }

  .skewed .handle {
      top: 50%;
      transform: rotate(30deg) translateY(-50%);
      height: 200%;
      transform-origin: top;
  }

  .skewed .top {
      transform: skew(-30deg);
      margin-left: -1000px;
      width: calc(50vw + 1000px);
  }

  .skewed .top .content-wrap {
    transform: skew(30deg);
    margin-left: 1000px;
  }

 @media (max-width: 768px){
     body {
         font-size: 75%;
     }
 }

document.addEventListener('DOMContentLoaded',function(){
    let wrapper = document.getElementById('wrapper');
    let topLayer = document.querySelector('.top');
    let handle = document.querySelector('.handle');

    let skew = 0;
    let delta = 0;
    
    if(wrapper.className.indexOf('skewed') != -1){
        skew = 1000;
    }
    
    wrapper.addEventListener('mousemove', function(e){
        delta = (e.clientX - window.innerWidth / 2) * 0.5;
      
        handle.style.left = e.clientX + delta + 'px';

        topLayer.style.width = e.clientX + skew + delta + 'px';

    });
});

Following along with tutorial created by Traversy Media at https://www.youtube.com/watch?v=5F0EvajMlXo.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Split Screen Slider</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <section id="wrapper" class="skewed">
    <div class="layer bottom">
      <div class="content-wrap">
        <div class="content-body">
          <h1>Look Sharp</h1>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut quisquam temporibus dolore vero reiciendis atque debitis. Sequi at consequatur deserunt?</p>
        </div>
        <img src="img/pc1.png" alt="">
      </div>
    </div>

    <div class="layer top">
        <div class="content-wrap">
          <div class="content-body">
            <h1>Stay Cool</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut quisquam temporibus dolore vero reiciendis atque debitis. Sequi at consequatur deserunt?</p>
          </div>
          <img src="img/pc2.png" alt="">
        </div>
      </div>

      <div class="handle"></div>
  </section>
  
  <script src="main.js"></script>
</body>
</html>

以上是关于html 分屏滑块的主要内容，如果未能解决你的问题，请参考以下文章

text 全屏滑块

css 使用Divi创建全屏滑块

JQuery UI Draggable 使用较新的 JQuery 3.3 失败（使用 JQuery UI Touch Punch）

全屏内容滑块仅向右滑动

当用户将鼠标悬停在滑块上时，使光标成为手

多行触屏滑动轮播