CSS-上下滑动翻页效果

吉吉安

已于 2023-03-15 19:47:47 修改

阅读量1.5k

点赞数 2

分类专栏：前端CSS 文章标签： html css3 javascript

于 2023-03-15 19:25:38 首次发布

本文链接：https://blog.csdn.net/weixin_43811753/article/details/129565156

版权

前端CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

效果展示
在这里插入图片描述
代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- <link rel="stylesheet" href="/style.css" /> -->
    <title>Document</title>
  </head>
  <body>
    <div class="hero">
      <h1>人物介绍</h1>
      <div class="review-box">
        <div id="slide">
          <div class="card">
            <div class="profile">
              <img src="/image/pic1.jpg" />
              <div>
                <h3>Phoenix</h3>
                <p>Web Designer</p>
              </div>
            </div>
            <p>
              The designer sat at their desk, surrounded by sketches and color
              swatches. They carefully crafted each line and curve, choosing
              just the right hue to bring their vision to life. With a steady
              hand and a sharp eye, they transformed blank pages into beautiful
              works of art.
            </p>
          </div>
          <div class="card">
            <div class="profile">
              <img src="image/pic2.jpg" />
              <div>
                <h3>Steve McCurry</h3>
                <p>UI/UX Designer</p>
              </div>
            </div>
            <h3>
              The designer sat at their desk, surrounded by sketches and color
              swatches. They carefully crafted each line and curve, choosing
              just the right hue to bring their vision to life. With a steady
              hand and a sharp eye, they transformed blank pages into beautiful
              works of art.
            </h3>
          </div>
          <div class="card">
            <div class="profile">
              <img src="image/pic3.jpg" />
              <div>
                <h3>Merlin Nauven</h3>
                <p>Web Designer</p>
              </div>
            </div>
            <p>
              The designer sat at their desk, surrounded by sketches and color
              swatches. They carefully crafted each line and curve, choosing
              just the right hue to bring their vision to life. With a steady
              hand and a sharp eye, they transformed blank pages into beautiful
              works of art.
            </p>
          </div>
          <div class="card">
            <div class="profile">
              <img src="image/pic4.jpg" />
              <div>
                <h3>John Williams</h3>
                <p>Web Designer</p>
              </div>
            </div>
            <p>
              The designer sat at their desk, surrounded by sketches and color
              swatches. They carefully crafted each line and curve, choosing
              just the right hue to bring their vision to life. With a steady
              hand and a sharp eye, they transformed blank pages into beautiful
              works of art.
            </p>
          </div>
        </div>
        <div class="sidebar">
          <!-- <img src="/image/up-arrow.png" id="upArrow" /> -->
          <div id="upArrow">↑</div>
          <div id="downArrow">↓</div>
        </div>
          
          <!-- <img src="/image/down-arrow.png" id="downArrow" /> -->
        </div>
      </div>
    </div>
    <script>
      var slide = document.getElementById('slide')
      var upArrow = document.getElementById('upArrow')
      var downArrow = document.getElementById('downArrow')

      let x = 0

      upArrow.onclick = function () {
        if (x < 0) {
          x = x + 300
          slide.style.top = x + 'px'
        }
      }
      downArrow.onclick = function () {
        if (x > -900) {
          x = x - 300
          slide.style.top = x + 'px'
        }
      }
    </script>
  </body>
</html>
<style>
  * {
    padding: 0;
    margin: 0;
    font-family: sans-serif;
  }

  .hero {
    width: 100%;
    height: 100vh;
    background: #f6fbff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  h1 {
    font-size: 30px;
    position: relative;
    margin-bottom: 60px;
  }

  h1::after {
    content: '';
    width: 150px;
    height: 3px;
    background: linear-gradient(to right, #0780ed, #9f4db5);
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
  }

  .review-box {
    width: 90%;
    max-width: 700px;
    height: 300px;
    border-radius: 10px;
    box-shadow: -10px 10px 40px rgba(0, 0, 0, 0.25);
    position: relative;
    overflow: hidden;
  }
  #upArrow {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #fff;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
  }
  #downArrow {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #fff;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
  }
  .card {
    height: 300px;
    padding: 40px;
    color: #111;
    line-height: 22px;
    box-sizing: border-box;
    background: #fff;
    position: relative;
  }

  .profile {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
  }

  .profile img {
    width: 70px;
    border-radius: 50%;
    margin-right: 20px;
  }

  .profile h3 {
    font-size: 26px;
    color: #0780ed;
    margin-bottom: 8px;
  }

  #slide {
    width: 100%;
    padding-right: 60px;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.5s;
  }

  .sidebar {
    width: 60px;
    height: 100%;
    padding: 15px 0;
    box-sizing: border-box;
    background: #0780ed;
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }

  .sidebar img {
    width: 25px;
    padding: 5px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
  }
</style>