[JAVASCRIPT]原生js实现自动滚动条

最新推荐文章于 2022-11-23 16:39:31 发布

CN-Dust

最新推荐文章于 2022-11-23 16:39:31 发布

阅读量687

点赞数 1

分类专栏：前端学习文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_36286039/article/details/120219999

版权

JavaScript CSS动画三角形技巧滚动条前端开发

关键词由CSDN通过智能技术生成

前端学习专栏收录该内容

83 篇文章 1 订阅

订阅专栏

绝对不是因为看了今日校园的请假条,绝对不是!!!
本人每次进出校园都有正常请假哦!!!

原生js实现一个滚动条
index.html里面加一个容器

<div class="gundongtiao"></div>

js部分
首先我们获取到这个div

let gundongtiao = document.querySelector('.gundongtiao')

添加30个绿色小块块先

let v = `<div class="green-one">
          <div class="gundong-green"></div>
          <div class="gundong-green2"></div>
        </div>`
      for (let i = 1; i <= 30; i++) {
        v += `<div class="green-one">
          <div class="gundong-green"></div>
          <div class="gundong-green2"></div>
        </div>`
      }
      gundongtiao.innerHTML = v

现在把它们设置成三角形,再拼在一起成为菱形
css实现这部分内容

.gundongtiao {
        display: flex;
        position: absolute;
      }

.green-one {
        position: relative;
        display: flex;
        margin-right: 30px;
      }

.gundong-green {
        width: 0px; /*设置宽高为0，所以div的内容为空，从才能形成三角形尖角*/
        height: 0px;
        border-bottom: 15px solid #01d26d;
        border-left: 15px solid transparent; /*transparent 表示透明*/
        border-right: 15px solid transparent;
      }

.gundong-green2 {
        position: absolute;
        left: 14px;
        width: 0px; /*设置宽高为0，所以div的内容为空，从才能形成三角形尖角*/
        height: 0px;
        border-top: 15px solid #01d26d;
        border-left: 15px solid transparent; /*transparent 表示透明*/
        border-right: 15px solid transparent;
      }

现在让滚动条动起来
用setInterval实现

	  let timer // 定义一个timer作为计时器
      let style = gundongtiao.style // 获取这个div的style
      let num = 0 // num表示style里的left属性的值
      timer = setInterval(function () {
        style.left = `${num}px`
        num--
        if (num == -300) {
          num = 0
        }
      }, 25)

实现的效果:
动起来了

完整代码如下(装在一个html文件里就可以了,当然你想的话也可以分开)

<!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" />
    <title>Document</title>
  </head>
  <body>
    <div class="gundongtiao"></div>

    <script>
      let gundongtiao = document.querySelector('.gundongtiao')
      let v = `<div class="green-one">
          <div class="gundong-green"></div>
          <div class="gundong-green2"></div>
        </div>`
      for (let i = 1; i <= 30; i++) {
        v += `<div class="green-one">
          <div class="gundong-green"></div>
          <div class="gundong-green2"></div>
        </div>`
      }
      gundongtiao.innerHTML = v
      let timer // 定义一个timer作为计时器
      let style = gundongtiao.style // 获取这个div的style
      let num = 0 // num表示style里的left属性的值
      timer = setInterval(function () {
        style.left = `${num}px`
        num--
        if (num == -300) {
          num = 0
        }
      }, 25)
    </script>
    <style>
      .gundongtiao {
        display: flex;
        position: absolute;
      }

      .green-one {
        position: relative;
        display: flex;
        margin-right: 30px;
      }

      .gundong-green {
        width: 0px; /*设置宽高为0，所以div的内容为空，从才能形成三角形尖角*/
        height: 0px;
        border-bottom: 15px solid #01d26d;
        border-left: 15px solid transparent; /*transparent 表示透明*/
        border-right: 15px solid transparent;
      }

      .gundong-green2 {
        position: absolute;
        left: 14px;
        width: 0px; /*设置宽高为0，所以div的内容为空，从才能形成三角形尖角*/
        height: 0px;
        border-top: 15px solid #01d26d;
        border-left: 15px solid transparent; /*transparent 表示透明*/
        border-right: 15px solid transparent;
      }
    </style>
  </body>
</html>

快复制下来试一试吧!!!

CN-Dust

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
[JAVASCRIPT]原生js实现自动滚动条

绝对不是因为看了今日校园的请假条,绝对不是!!!本人每次进出校园都有正常请假哦!!!原生js实现一个滚动条index.html里面加一个容器<div class="gundongtiao"></div>js部分首先我们获取到这个divlet gundongtiao = document.querySelector('.gundongtiao')添加30个绿色小块块先let v = `<div class="green-one"> .
复制链接

扫一扫

专栏目录