根据数组中的值动态更改CSS

Change CSS dynamically based on a value from array

本文关键字：动态 CSS 数组      更新时间：2023-09-26

我有这部分的html:

<h1 class="gr-title uppercase">
<span class="title-red">GET MORE</span> 
<span id="wordSwap" class="title-black">PROFITS</span>
</h1>

…这段jquery代码改变了ID为wordSwap:

的span的值
(function(){
    //Words:
    var words = [
    'Profits',
        'Freedom',
        'Time',
        'Enjoyment',
        'Disconnection',
        'Value'
        ], i = 0;
    setInterval(function(){
        $('#wordSwap').fadeOut(function(){
            $(this).html(words[i=(i+1)%words.length]).fadeIn();
        });
       // 2 second interval
    }, 2000);
})();

我正试图根据接下来的值/词来改变数组中每个值的letter-spacing，但我被卡住了，无法让它工作。例如，我希望单词"Time"的letter-spacing = 30px，单词"Value"的letter-spacing = 20px，以此类推。我该怎么做呢?

这是我目前为止的一个概要:https://jsfiddle.net/vgum6jn6/

//Swap words effect
(function() {
  // List of words:
  var words = [
    'Profits',
    'Freedom',
    'Time',
    'Enjoyment',
    'Disconnection',
    'Value'
  ], i = 0;
  setInterval(function() {
    $('#wordSwap').fadeOut(function() {
      $(this).html(words[i = (i + 1) % words.length]).fadeIn();
    });
    // 2 seconds
  }, 2000);
})();
.gr-title {
  font-family: "Arial", Georgia, Serif;
}
.uppercase {
  text-transform: uppercase;  
}
.title-red {
  color: #CB0000;
}
.title-black {
  color: #191919;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<h1 class="gr-title uppercase">
  <span class="title-red">GET MORE</span> <span id="wordSwap" class="title-black">PROFITS</span>
</h1>

试试这样:

var baseWidth = 100; //some value
setInterval(function(){
    $('#wordSwap').fadeOut(function(){
        $(this).html(words[i=(i+1)%words.length]).fadeIn()
          .css('letter-spacing','') //reset spacing
          .css('letter-spacing', function(){
                var ratio = baseWidth / $(this).prop('offsetWidth');
                return ratio + 'px';
               });
    });
   // 2 second interval
}, 2000);

Alex Kudryashev帮我想出了这个，它完美地解决了我的问题:

             //Swap words effect:
            var words = [
                { word: 'Profits', spacing: '8px' },
                { word: 'Enjoyment', spacing: '0px' },
                { word: 'Freedom', spacing: '4px' },
                { word: 'Disconnection', spacing: '-2px' },
                { word: 'Time', spacing: '0.98em' },
                { word: 'Value', spacing: '0.5em' }
                ], i = 0, n = 0;
            setInterval(function () {
                $('#wordSwap').fadeOut(function () {
                    $(this).html(words[i = (i + 1) % words.length].word)
                    .css('letter-spacing', words[n = (n + 1) % words.length].spacing).fadeIn();
                });
                // 2 seconds
            }, 2000);

(忽略随机的字母间距值，它们对于测试目的是随机的)

相关文章：