个人中心
gpt4 book ai didi

jquery - 相同的函数将为每个独特的类使用不同的数组

转载 作者：太空宇宙 更新时间：2023-11-04 08:11:30 25 4
gpt4 key购买 nike

对不起，如果我搞砸了标题。我不太确定如何正确描述我的情况。我还是个初学者。

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

总结:我希望每个唯一的数组都与唯一的类和单个函数连接，这将使“闪烁的铭文”效果发生。

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

最佳答案

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

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

关于jquery - 相同的函数将为每个独特的类使用不同的数组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46254824/

25 4 0
文章推荐： c - 为什么在结构数组中使用字符元素会出现运行时错误
文章推荐： python - 创建包含成对的另一个列表的列表？
文章推荐： 使用 arm-eabi-gcc 交叉编译模块
文章推荐： python - 以相同的宽度打印 ":"右侧的所有内容
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com