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 );
}

然后我尝试在if语句中包含调用，如下所示，但这根本不起作用。

 $.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

它只运行一次，因为没有 EventListener 。（除了onload）

你基本上说：“加载文档时设置图像的不透明度”。这就是jQuery所做的（只有一次）。

事情是我不知道你什么时候想要执行这个功能。

点击按钮时？
加载新图片时？
每一对秒？

我将举一个简单的例子：

您希望每500毫秒（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>

如何更改屏幕中心的任何对象？

1 个答案: