如何更改屏幕中心的任何物體？

Question

我創建了下面的代碼，它將使任何不在窗口中心的圖像變暗，但它只運行一次。我正在使用onload來確保我有圖像，然後再操作它們。我想將不透明度更改爲屏幕中間任何圖像的1。

 $(window).on("load", function scrolldim() { 

     var xHome = window.innerWidth/2; 
     var yHome = window.innerHeight/2; 
     var pElement = document.elementFromPoint(xHome, yHome).id; 

       $(".mid img").not(document.getElementById("#" + pElement)) 
.fadeTo("slow", 0.3); 

if($(".mid img").attr('id') == pElement) { 
    $("#" + pElement).fadeTo("slow", 1); 
} 

然後我試着在下面的when聲明中打包調用，但是根本沒有用。

$.when(ajaxLoad()).done(function(a1, a2, a3, a4){ 

       var xHome = window.innerWidth/2; 
     var yHome = window.innerHeight/2; 
     var pElement = document.elementFromPoint(xHome, yHome).id; 

       $(".mid img").not(document.getElementById("#" + pElement)) 
.fadeTo("slow", 0.3); 

if($(".mid img").attr('id') == pElement) { 
    $("#" + pElement).fadeTo("slow", 1); 

}); 

Answer 1

它只運行一次，因爲沒有事件監聽（除了onload事件）

你基本上說：「當加載文檔設置圖像的不透明度」。這就是jQuery所做的（只有一次）。

事情是我不知道什麼時候你想要執行這個功能。

• 當點擊一個按鈕？
• 當新圖像加載？
• 每一對 秒？

我會給你一個簡單的例子：

• 你想每500ms（0.5秒）

$(window).on("load", function() { 
 
    setInterval(scrolldim, 500); //call the scrolldim function every 0.5sec 
 
}); 
 

 
function scrolldim(){ 
 
    
 
     var xHome = window.innerWidth/2; 
 
     var yHome = window.innerHeight/2; 
 
     var pElement = document.elementFromPoint(xHome, yHome).id; 
 
     console.log("500"); 
 
     $(".mid img").not(document.getElementById("#" + pElement)) 
 
     .fadeTo("slow", 0.3); 
 
     if ($(".mid img").attr('id') === pElement) { 
 
      $("#" + pElement).fadeTo("slow", 1); 
 
     } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

要執行的功能