【发布时间】：2017-09-16 14:12:51
【问题描述】：
对不起，如果我把标题搞砸了。我不确定如何正确描述我的情况。我还是个初学者。
无论如何，我正在尝试在图像上创建一个简单的悬停效果，该效果将显示唯一数组中的一个单词，将其更改为另一个并重复每个.12s - 一种闪烁效果。
一开始我会有 8 个图像，这意味着我必须创建 8 个唯一的数组。
问题是，为了让一切正常工作，我必须为每个单独的图像/唯一类乘以相同的函数，这对我来说似乎有点混乱，即使它有效。
这是两个容器的小示例 - 将鼠标悬停在灰色区域上：
$(window).on("load", function() {
var LP1 = [
'ui',
'ux',
'webdesign',
'logo',
'responsive',
'personal'
], i = 0;
setInterval(function(){
$('.left-title').fadeOut(0, function(){
$(this).html(LP1[i=(i+1)%LP1.length]).fadeIn(0);
});
}, 120);
var LP2 = [
'cover',
'art',
'music',
'print',
'personal'
], i = 0;
setInterval(function(){
$('.right-title').fadeOut(0, function(){
$(this).html(LP2[i=(i+1)%LP2.length]).fadeIn(0);
});
}, 120);
});* {
margin: 0;
padding: 0;
}
body {
height: 100%;
width: 100%;
}
.wrap-fixed-real {
width: calc(100% - 32px);
height: calc(100% - 32px);
position: fixed;
top: 16px;
left: 16px;
z-index: 1;
}
.left {
top: 0;
position: absolute;
left: 0px;
height: 100%;
width: calc(50% - 8px);
background-color: #292929;
}
.right{
top: 0px;
position: absolute;
right: 0px;
height: 100%;
width: calc(50% - 8px);
background-color: #292929;
}
.dimming {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 2;
background-color: #000000;
transition: opacity .24s 0s cubic-bezier(.64,0,.36,1);
}
.left-title {
position: absolute;
display: block;
width: calc(100% - 32px);
top: 50%;
transform: translateY(-50%);
left: 16px;
z-index: 3;
opacity: 0;
font-family: 'Roboto', sans-serif;
font-weight: normal;
font-size: 32px;
text-align: center;
line-height: 48px;
color: #ffffff;
mix-blend-mode: difference;
transition: opacity .24s 0s cubic-bezier(.64,0,.36,1);
}
.left:hover .dimming {
opacity: .4;
}
.left:hover .left-title {
opacity: 1;
}
.right-title {
position: absolute;
display: block;
width: calc(100% - 32px);
top: 50%;
transform: translateY(-50%);
left: 16px;
z-index: 3;
opacity: 0;
font-family: 'Roboto', sans-serif;
font-weight: normal;
font-size: 32px;
text-align: center;
line-height: 48px;
color: #ffffff;
mix-blend-mode: difference;
transition: opacity .24s 0s cubic-bezier(.64,0,.36,1);
}
.right:hover .dimming {
opacity: .4;
}
.right:hover .right-title {
opacity: 1;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="wrap-fixed-real">
<div class="left">
<div class="left-title">LP1</div>
<div class="dimming"></div>
</div>
<div class="right">
<div class="right-title">LP2</div>
<div class="dimming"></div>
</div>
</div>
</body>抱歉，代码混乱。如果涉及 css，我想我可以创建 8 个不同的子类和 1 个共享相同样式的唯一子类，但我不知道如何强制单个函数为每个图像/唯一类使用不同的数组。我在互联网上进行了一些研究，但找不到答案。也许我只是在谷歌中使用了错误的关键字，所以如果有人能指出我正确的方向，那就太好了。或者也许创造我想要的东西是可能的，只有通过乘以一个函数？我不确定。
总结：我希望每个独特的Array都与独特的类和单个函数连接，从而产生“闪烁铭文”的效果。
还有一件事我不确定。每隔.12s更改文字的效果将同时播放8张不同的图像。它会减慢我的网站速度吗？也许另外我应该在开始时隐藏这个效果，而不是仅仅将不透明度设置为 0？
【问题讨论】：