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

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>

要执行的功能