Question

很抱歉，如果我弄乱了标题。我不确定如何正确描述我的情况。我还是个初学者。

无论如何，我试图在图像上创建一个简单的悬停效果，这些图像将显示独特数组中的单词，将其更改为另一个并重复每个.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个独特的共享相同的样式，但我不知道如何强制单个函数为每个图像/唯一类使用不同的数组。我在互联网上做了一些研究，但我找不到答案。也许我只是在google中使用wrrong关键字，所以如果有人能指出我正确的方向，那就太好了。或者也许通过乘以函数来创建我想要的东西是可能的？我不确定。

摘要：我希望每个独特的数组都与唯一的类和单一功能相连，这将使“闪烁铭文”效果发生。

还有一件我不确定的事情。每隔.12s更改文本的效果将一次为8个不同的图像播放。是否会减慢我的网站速度？也许另外我应该在开始时隐藏这个效果，而不是仅仅将不透明度设置为0？

Answer 1

您可以为此创建一个小jQuery插件：

＆＃13;

$.fn.flashWith = function (LP, delay) {
    setInterval(function(){
        this.fadeOut(0, function(){
            // cycle the given array as you get the first text
            $(this).text(LP.shift(LP.push(LP[0]))).fadeIn(0);
        });
    }.bind(this), delay);
    return this;
};

$(function() {
    $('.left-title').flashWith([
        'ui',
        'ux',
        'webdesign',
        'logo',
        'responsive',
        'personal'
    ], 120);

  $('.right-title').flashWith([
        'cover',
        'art',
        'music',
        'print',
        'personal'
    ], 120);
});

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

相同的函数将为每个唯一的类使用不同的数组

1 个答案: