Question

我遇到了这个问题，我不知道如何搜索或解释它。我尝试使用mousewheel事件添加类。我写了这个JS代码

`

var count = 1;
$(document).ready(function(){
    $(window).bind('mousewheel', function(e){
        if(e.originalEvent.wheelDelta /120 > 0) {
           $('li.'+count).addClass("show").siblings().removeClass("show");
            count = count - 1;
            if (count == 0) {
            count = 6;
          }


        }
        else{
          $('li.'+count).addClass("show").siblings().removeClass("show");
          count++;
          if (count == 6) {
            count = 0;
          }

        }


    });});`

由于我循环到5个列表元素，我做了那些条件......非常原始的代码，但做了这个工作。

html

<ul class="list-unstyled">
            <li class="1 show" >
            <div class="row">
                <div class=" col-md-5">
                    <img src="img/bouchra.jpg" alt="Someone 1" >
                </div>
                <div class="col-md-7 text-center">
                    <h2 style="display:flex;justify-content:center;align-items:center;font-size:18px;">Someone 1 Someone 1</h2>
                </div>
            </div>
        </li>
        <li class="2" ></li>
        <li class="3" ></li>
                ...
    </ul>

这很有效，因为我希望它能够工作......我可以循环浏览我的列表并在滚动时隐藏它们......但问题是它太快了，因为每一个小轮子旋转它都会改变。我试图暂停

var count = 1;
$(document).ready(function(){
    $(window).bind('mousewheel', function(e){

        if(e.originalEvent.wheelDelta /120 > 0) {
            setTimeout(function() {  $('li.'+count).addClass("show").siblings().removeClass("show");
            count = count - 1;
            if (count == 0) {
            count = 6;
          }
             }, 800);

        }
        else{
        setTimeout(function() {   $('li.'+count).addClass("show").siblings().removeClass("show");
          count++;
          if (count == 6) {
            count = 0;
          }
             }, 800);
        }


    });
});

但它没有用，事件不起作用，但它记得我做了多少次旋转并在之后应用它们。我是新手，请帮忙; - ;

Answer 1

我相信你正在寻找一个油门。

使用setTimeout设置超时将延迟操作，但所有操作最终都会运行。节流器只能在给定的时间内接受一个功能。

var throttle = 500; // .5 seconds
var time = -1;

element.addEventListener("myEvent", function (e) {
   var now = Date.now() // Current time, in milliseconds
   if (time !== -1 && now - time < throttle)
     return; // Get out, we haven't waited long enough

   time = now;
   // This will only run on the event after at least [throttle] ms have passed
   doThing();
})

这是一个试图了解你的具体情况的JSFiddle，虽然我根本不确定你的目的是什么。使用throttle var来寻找最适合您的方法。

请尝试使用JSFiddle或类似的东西在将来的问题中提供一些工作代码！

PS：正如我所说，我不确定你的目的是什么，但由于mousewheel wheelDelta scroll poor browser support，我会考虑使用

<a href="#" data-value="" onclick="google.maps.event.trigger(villageAyeMya,'mouseover', {latLng: new google.maps.LatLng(20.235333, 94.854444)});">Village 1</a>

}和keeping track of your position on the screen manually。

延迟鼠标滚轮事件

1 个答案: