Question

我使用JQuery构造使用Flex Boxes样式化的图像网格的HTML。在桌面上效果很好。在移动设备上，我得到了这样奇怪的结果：图像跳跃，重叠和重复。有时，只有一张图片的一部分再次出现在另一张图片上。

您可以使用下面提供的jsfiddle复制问题，并快速刷新页面多次。

这些是人脸的图像，因此结果令人称赞，但我需要修复此错误！我猜测这与我如何以随机顺序使用JQuery构建网格有关：

var a={};
$(document).ready(function(){
    a.team = [
        {'name':'John','title':'Creative Director and Lead Designer','img':'John.jpg'},
        {'name':'Nate','title':'Director of Game Day Operations','img':'Nate.jpg'},
        {'name':'Morgan','title':'Spokesperson','img':'Morgan.jpg'},
        {'name':'Tom','title':'Lead Web Developer','img':'Tom.jpg'}
    ];

    for(member in a.team) a.team[member].ran = Math.random();

    a.team.sort(function(a, b) { return a.ran - b.ran; });

    a.h = '';
    for(member in a.team){
        var h = '';
        h += "<a class='tm-area ongrey' href='/#'>";
        h += "  <div class='tm-pic-area'>";
        h += "      <img src='images/team/"+a.team[member].img+"' class='tm-pic g'>";
        h += "      <img src='images/team/Portrait Frame.svg' class='tm-mask'>";
        h += "  </div>";
        h += "  <div class='tm-info-area'>";
        h += "      <div class='tm-info-name goth'>"+a.team[member].name+"</div>";
        h += "      <div class='tm-info-title euro'>"+a.team[member].title+"</div>";
        h += "  </div>";
        h += "</a>";

        a.h += h;
    }

    $('#icon-grid').html(a.h);
});

这是CSS：

#icon-grid{
    float: left; display: block; width: 100%;  margin: 10px 0;
    display: -webkit-flex;  display: flex;
    -webkit-justify-content: space-around; justify-content: space-around;
   -webkit-align-content: stretch; align-content: stretch;
    -webkit-flex-wrap: wrap; flex-wrap: wrap;
}
.tm-area{ width: 180px;  margin: 10px; cursor: pointer; display: block; 
    text-decoration: none; color: black;}
.tm-pic-area{ width: 180px; height: 180px; }
img.tm-pic{ width: 178px; height: 178px; margin:1px; 
    position: absolute; z-index: 1; float: left;
    -webkit-transition:-webkit-filter 0.3s ease-in-out;
    -moz-animation: -moz-filter 0.3s; /* Firefox */
    -o-animation: -o-filter 0.3s; /* Opera */
}
.g {
    filter:gray;
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(1);
}
img.tm-mask{width: 180px; height: 180px; position: absolute; z-index: 2; float: left;}
.tm-info-area{ width: 100%; }
.tm-info-name{ width: 100%; font-size: 20px; font-weight: bold; text-align: center; 
    border-bottom: 2px solid black; margin-bottom: 4px; padding-bottom: 2px; }
.tm-info-title{ width: 100%; font-size: 14px; text-align: center; 
    font-weight: bold; margin-bottom: 4px; }

@media screen and (min-width:0px) and (max-width:400px){
    .tm-area{ width: 140px; margin: 5px; }
    .tm-pic-area{ width: 140px; height: 140px; }
    img.tm-pic{ width: 138px; height: 138px; }
    img.tm-mask{width: 140px; height: 140px; }
    .tm-info-name{ font-size: 16px; }
}

为什么这会发生在我身上？

已使用jsfiddle示例进行了更新

https://jsfiddle.net/gux8py6f/7/

https://jsfiddle.net/gux8py6f/7/embedded/result

您可以使用此jsfiddle并通过快速刷新页面多次来复制问题。

Answer 1

问题最终是灰度CSS属性的不可靠性。

filter          : gray;
-webkit-filter  : grayscale(1);
-moz-filter     : grayscale(1);

因此，要获得我想要的从灰色到悬停效果，我现在彼此之间有2张图像；一种颜色和一种灰色。当鼠标悬停时，我使用JQuery对顶部灰色图像的不透明度进行动画处理，以显示其下方图像的彩色版本。

使用JavaScript构建的移动Glitchy图像网格

1 个答案: