javascript - 使用 JavaScript 构建的移动故障图像网格
问题描述
我使用 JQuery 来构建使用 Flex Box 设置样式的图像网格的 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 并通过快速刷新页面多次来复制问题。
解决方案
问题最终是灰度 CSS 属性的不可靠性。
filter : gray;
-webkit-filter : grayscale(1);
-moz-filter : grayscale(1);
因此,为了获得我想要的悬停效果,我现在有 2 张图像在彼此之上;一种颜色和一种灰色。当鼠标悬停时,我使用 JQuery 对顶部灰色图像的不透明度进行动画处理,以显示下方图像的彩色版本。
推荐阅读
- django - save() 得到了一个意外的关键字参数“force_insert”
- php - 无法通过键从数组中删除或取消设置特定项目
- node.js - 使用现有的 express 网页建立一个新的 react 应用程序
- javascript - Bootstrap Vue Table - 从多个表中获取选择?
- javascript - 有没有办法让 HTML5 视频在视频中的特定点显示一个 div?
- javascript - 数组如何通过读取函数中的未定义参数来识别从自身中提取的内容?
- node.js - NWJS 为不同的操作系统和不同的架构编译二进制文件
- java - Docker 容器不打印日志而不是 log4j2.xml 中指定的位置
- python - 我的小型 python 应用程序运行有点慢。可能的瓶颈?
- runtime - 如何使用 VIMRUNTIME=runtime ./build/bin/nvim 从任何地方启动 nvim?