相同的功能，將使用不同的陣列爲每個獨特的類

對不起，如果我搞砸標題。我不確定如何正確描述我的情況。我仍然是初學者。相同的功能，將使用不同的陣列爲每個獨特的類

無論如何，我想創建一個簡單的懸停效果在圖像上，將顯示一個單獨的數組的單詞，將其更改爲另一個，並重復每個.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個獨特的共享相同的樣式，但我不知道如何強制單個函數爲每個圖像/獨特類使用不同的數組。我在網上做了一些研究，但是我找不到答案。也許我只是在谷歌中使用wrrong關鍵字，所以如果任何人都可以指出我正確的方向，那很好。或者，也許創造我想要的是可能的，只有通過乘以一個函數？我不確定。

總結：我想要每一個獨特的數組與獨特的類和單一的功能，將使「閃爍銘文」效果發生連接。

還有一件事我不確定。每改變一次.12s文字的效果將一次播放8張不同的圖像。它是否會減慢我的網站？也許除此之外，我應該在開始時隱藏這種效果，而不是將不透明度設置爲0？

來源

2017-09-16 Tanuki

你可以創建一個小的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>

來源

2017-09-16 15:28:47 trincot

感謝您抽出時間好先生。我很感激。我必須承認，但我不完全明白它是如何工作的。稍後我會做一些研究。現在我要實現這一點。再次感謝！ :) – Tanuki

您可以在[jquery.com]（https://learn.jquery.com/plugins/basic-plugin-creation/）上閱讀有關創建插件的內容（即定義一些'$ .fn.xxxx'函數）。 – trincot

相同的功能，將使用不同的陣列爲每個獨特的類

回答

相關問題