个人中心
gpt4 book ai didi

javascript - 使用 wheel event a increments 遍历数组

转载 作者：行者123 更新时间：2023-11-29 10:55:55 26 4
gpt4 key购买 nike

我想改变 <main> 的颜色使用 wheel 的元素事件。如果event.deltaY是负的，即向上滚动我想向后循环遍历数组，所以，如果 index = 2它会变成蓝色、紫色、黑色、白色，然后一直到最后，太蓝了。如果event.deltaY是正的，即向下滚动，我想向前循环数组，如果 index = 3 ，它会变成蓝色、橙色、白色、黑色等。只要有卷轴，它就应该无限循环。目前，我无法将索引设置为在两端循环。任何帮助将不胜感激。

const container = document.querySelector('main')
const classes = ['white', 'black', 'purple', 'blue', 'orange']

let index = 0

const throttle = (func, limit) => {
    let inThrottle
    return function() {
        const args = arguments
        const context = this
        if (!inThrottle) {
            func.apply(context, args)
            inThrottle = true
            setTimeout(() => inThrottle = false, limit)
        }
    }
}

function changeColour(event) {
    if (event.deltaY < 0) {
        ++index
        if (index === index.length - 1) {
            index = 0
        }
        console.log(index);
        container.classList = classes[index]
    }
    if (event.deltaY > 0) {
        --index
        console.log(index);
        if (index === 0) {
            index = index.length - 1
        }
        container.classList = classes[index]
    }
}

container.addEventListener('wheel', throttle(changeColour, 1250)) 
main {
  height: 50px;
  width: 50px;
  border: 1px solid;
}

main.white {
    background-color: #FFFFFF;
}

main.black {
    background-color: #101010;
}

main.purple {
    background-color: #8E002E;
}

main.blue {
    background-color: #002091;
}

main.orange {
    background-color: #C05026;
}
<main>
</main>

最佳答案

问题

  1. index = index.length - 1 index = classes.length -1

  2. container.classList = classes[index] container.classList.add(classes[index])

  3. 没有删除任何其他类的语句。

  4. 事件监听器和 on-event 属性不使用函数的括号，因为它会被误解为直接调用要运行的函数。回调函数是相反的，因为它们等待被调用。如果回调函数需要额外的参数，您需要用匿名函数包装回调函数，正确的语法如下:

    • on-event 属性:
      document.querySelector('main').onwheel = scrollClass;

    • 事件监听器:
      document.querySelector('main').addEventListener('wheel', scrollClass)

      <

    • 事件属性传递额外参数:

      document.querySelector('main').onwheel = function(event) {
        const colors = ['gold', 'black', 'tomato', 'cyan', 'fuchsia'];
        scrollClass(event, colors);
      }

    • 传递额外参数的事件监听器:

      document.querySelector('main').addEventListener('wheel', function(event) {
        const colors = ['gold', 'black', 'tomato', 'cyan', 'fuchsia'];
        scrollClass(event, colors);
      }

演示中评论的细节

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <title>Wheel Event Demo</title>
  <style>
     :root {
      font: 400 16px/1.2 Consolas;
    }
    
    html,
    body {
      width: 100%;
      height: 100%;
    }
    
    body {
      overflow-y: scroll;
      overflow-x: hidden;
      padding: 5px 0 20px;
    }
    
    main {
      height: 50vh;
      width: 50vw;
      margin: 10px auto;
      border: 1px solid #000;
    }
    
    main.gold {
      background-color: #FFCC33;
      transition: 0.5s;
    }
    
    main.black {
      background-color: #101010;
      transition: 0.5s;
    }
    
    main.tomato {
      background-color: #FF6347;
      transition: 0.5s;
    }
    
    main.cyan {
      background-color: #E0FFFF;
      transition: 0.5s;
    }
    
    main.fuchsia {
      background-color: #FD3F92;
      transition: 0.5s;
    }
  </style>
</head>

<body>
  <main></main>
  <script>
    // Reference the main tag
    const container = document.querySelector('main');
    // Declare index
    let index = 0;

    /** scrollClass(event, array)
    //@ Params: event [Event Object]: Default object needed for event properties
    //          array [Array].......: An array of strings representing classNames 
    //A Pass Event Object and array of classes
    //B Reference the tag bound to the wheel event (ie 'main')
    //C1 if the change of wheel deltaY (vertical) is less than 0 -- increment index
    //C2 else if the deltaY is greater than 0 - decrement index
    //C3 else it will just be index (no change)
    //D1 if index is greater than the last index of array -- reset index to 0
    //D2 else if index is less than zero -- reset index yo the last index of array
    //D3 else index is unchanged.
    //E Remove all classes of the currentTarget ('main')
    //F Find the string located at the calculated index of the array and add it as a 
        className to currentTarget
    */
    function scrollClass(event, array) { //A
      const node = event.currentTarget; //B
      index = event.deltaY < 0 ? ++index : event.deltaY > 0 ? --index : index; //C1-3
      index = index > array.length - 1 ? 0 : index < 0 ? array.length - 1 : index; //D1-3
      node.className = ''; //E
      node.classList.add(array[index]); //F
    }

    /*
    Register wheel event to main
    When an event handler (ie scrollClass()) has more than the Event Object to pass 
    as a parameter, you need to wrap the event handler in an anonymous function. 
    Also, it's less error prone if the parameter is declared within the
    anonymous function.
    */
    container.addEventListener('wheel', function(event) {
      const colors = ['gold', 'black', 'tomato', 'cyan', 'fuchsia'];
      scrollClass(event, colors);
    });
  </script>
</body>

</html>

关于javascript - 使用 wheel event a increments 遍历数组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57280527/

26 4 0
文章推荐： mysql - 如何将所有现有应用程序数据从 sqlite3 复制到 Rails 中的 MySQL？
文章推荐： javascript - useReducer 可以使用状态数组吗？
文章推荐： javascript - PCI 无法对 google js 进行脚本源完整性检查
文章推荐： Mysql，我怎样才能防止这种重复
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com