拖動鼠標事件

我遇到了這個問題，我不知道如何搜索或解釋它。我正在嘗試使用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; 
      } 

     } 


    });});`

由於IM循環到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); 
     } 


    }); 
});

但它沒有工作，事件不會工作，但它會記住我多少做旋轉後應用它們。我是新手，請幫忙; - ;

來源

2016-11-08 Bououm

我相信你在找一個油門。

設置超時時間爲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或類似的東西！

P.S：正如我說我不知道你要什麼，但因爲mousewheel的wheelDelta有poor browser support，我會考慮使用scroll和keeping track of your position on the screen manually。

來源

2016-11-08 01:41:39

謝謝@Kaiido，編輯。 –

拖動鼠標事件

回答

相關問題