React 小球滑块

最新推荐文章于 2022-03-21 16:04:49 发布

初夏七鹿

最新推荐文章于 2022-03-21 16:04:49 发布

阅读量87

点赞数 1

本文链接：https://blog.csdn.net/m0_58875967/article/details/119891654

版权

这篇博客介绍了如何在React中实现一个小球滑块的交互效果。首先，通过引入browser.js、react.js和react-dom.js库来搭建基础环境。接着，详细讲解了利用JavaScript和CSS创建滑块及其动态小球移动的实现过程。

摘要由CSDN通过智能技术生成

先引入JS

可以网上下载

body

  <div id="root"></div>

<script type="text/babel">
    let oDiv = document.querySelector("#root");

    class Comp extends React.Component {
      constructor(...ages) {
        super(...ages);
      }

      fnStart(ev) {
        this.disX = ev.changedTouches[0].pageX - ev.target.offsetLeft;
        // console.log(this.disX)
        this.parent = ev.target.parentNode;
        this.lcircle = this.parent.children[2];
        this.rcircle = this.parent.children[3];
        this.ow = this.parent.getBoundingClientRect().width;
        this.clientW = this.ow - ev.targ