當元素到達屏幕上的位置時觸發事件

我想根據元素的位置觸發某些功能。該元素的位置每十秒鐘更改一次。有兩個數十個觸發功能。當元素到達屏幕上的位置時觸發事件

我想過這個僞代碼：

When element position changes{ 
    Loop through all the coordinates to see if a function can be triggered{ 
    if the current element position matches the function's triggering position 
     execute the function 
    } 
}

但通過所有可能的位置開始循環每個分割秒負擔的瀏覽器。所以，如果有辦法讓事情做到這一點。

可能嗎？

編輯：甜菜根 - 甜菜根評論後，我必須說，移動的元素只在X橫座標上移動：所以只是一個維度。

這很像水平時間線從左向右移動，其中一些動畫發生在某一年達到時。但是移動速度可以由用戶增加，所以固定時間觸發動畫不是一種選擇。

來源

2012-09-07 Cedric

你能描述位置矩陣的性質嗎？例如，它是規則直線（「笛卡爾」），隨機直線（「蒙德里安」），同心圓（「圓」），正常極（「豐塔納」），半正常極（「飛鏢」），lobal-polar（「Dhalia」）？ –

在JavaScript和一般網絡環境下，我們通常會談論笛卡爾式的（儘管不是必需的，特別是對於遊戲），在這種情況下是這樣。 – Cedric

當然，這是所有定位的起點，但一個典型的屏幕有網頁可能有像50萬像素的東西，你說只有二十幾個觸發功能。因此，必須有某種像素映射到函數。如果沒有這個映射的知識，你的問題只能用最通用的術語來回答，而這些術語並不會特別有用。 –

必須有許多方法來實現你想要的。下面的代碼利用jQuery處理自定義事件的能力來提供「鬆散耦合」的觀察者模式。

$(function() { 

    //Establish the two dozen functions that will be called. 
    var functionList = [ 
     function() {...}, 
     function() {...}, 
     function() {...}, 
     ... 
    ]; 

    var gridParams = {offset:10, pitch:65};//Example grid parameters. Adjust as necessary. 

    //Establish a custom event and its handler. 
    var $myElement = $("#myID").data('lastIndex', -1).on('hasMoved', function() { 
     $element = $(this); 
     var pos = $element.position();//Position of the moved element relative to its offset parent. 
     var index = Math.floor((pos.left - gridParams.offset)/gridParams.pitch);//Example algorithm for converting pos.left to grid index. 
     if(index !== $element.data('lastIndex')) {//Has latest movement align the element with the next grid cell? 
      functionList[index](index, $element);//Call the selected function. 
      $element.data('lastIndex', index);//Remember index so it can be tested mext time. 
     } 
    }); 
}); 

$(function() { 
    //(Existing) function that moves the element must trigger the custom 'hasMoved' event after the postition has been changed. 
    function moveElement() { 
     ... 
     ... 
     ... 
     myElement.trigger('hasMoved');//loosely coupled 'hasMoved' functionality. 
    } 

    var movementInterval = setInterval(moveElement, 100); 
});

正如你可以看到，鬆耦合的優點是，一個函數和調用它可以在不同的範圍的代碼 - .on('hasMoved', function() {...}和myElement.trigger('hasMoved')，可在不同結構。

如果您想添加其他功能來更改myElement（例如第一個，上一個，下一個，最後一個功能）的位置，那麼在移動元素後，他們每個只需觸發'hasMoved'以確保調用你的二十幾個函數中的一個，而不需要擔心範圍。

您需要確保的唯一一件事就是您的二十幾個函數的範圍是可以由自定義事件處理程序調用的（即它們位於相同範圍或外部範圍內，直至包括全局範圍）。

我不得不做出很多假設，所以上面的代碼不會100％正確，但希望它能爲您提供一種前瞻。

來源

2012-09-10 11:36:56

感謝您的詳細解答！ – Cedric

當元素到達屏幕上的位置時觸發事件

回答

相關問題