Question

我有话

<p class="item">Ultimatepp’s</p>

我需要在悬停时更改每个字母

我有字符var characters ='a #ldfhas？

kdjbihoEFGHIJKLMNOPQRS！adfjsd（＆amp;？aqdo0ap $ dfs @ dfqwqrwr';我需要在Ultimatepp的单词中插入随机字符而不是随机字符。

var item = $('.item');
    var arr = Array.from(item);

item.on('mouseenter', function () {
        var characters = 'a#ldfhas?kdjbihoEFGHIJKLMNOPQRS!adfjsd(&?aqdo0ap$dfs@dfqwqrwr';
        var charactersArr = Array.from(characters);
        var self = $(this);
        var itemText = self.html();
        var arr = Array.from(itemText);
        var reversed = arr.reverse();
        var string = reversed.join('');
        var x = charactersArr.splice(Math.random() * itemText.length, itemText.length);
        $(this).html(x);
    });

我写了这段代码来改变整个单词，但我需要替换字符。也许这段代码可以重写？

Answer 1

我会在每个字母中包装每个字母，以便您可以将单独的悬停事件绑定到每个字母：

＆＃13;

apk --update add libssh2-dev

＆＃13;

var characters = 'a#ldfhas?kdjbihoEFGHIJKLMNOPQRS!adfjsd(&?aqdo0ap$dfs@dfqwqrwr',
    intervalVar,
    timeoutVar;
    intervalCount = 0;

$('.item').html(function() {                                       // this just wraps the original words letters in spans
  var text = $(this).text(),
    html = '';

  for (i = 0; i < text.length; i++) {
    html += `<span data-original="${text[i]}">${text[i]}</span>`;
  }

  return html;
})                                               
.on('mouseenter', function() {
   var $item = $(this);
   changeChars($item);                              // run immediately when you hover
   setupInterval($item);
})
.on('mouseleave', function() {
  clearInterval(intervalVar);                       // clear interval
  clearTimeout(timeoutVar);                       // clear timeout
  originalChars($(this));                           // reset word
});

function originalChars($elem) {                     // resets word
  var $spans = $elem.children('span');
  $spans.text(function() {
    return $(this).data('original');
  });
  
  return $spans;
}

function setupInterval($elem) {
   clearTimeout(timeoutVar);
   intervalVar = setInterval(function() {           // set new interval to change the characters every second you are hovering
     changeChars($elem);
   }, 200);
}

function changeChars($elem) {
  var $spans = originalChars($elem);                           // reset word before changing again
  var changed = [];
  
  // number of letters to change in original word (up to half of them can change) or change to a constant - eg 4
  var toChange = Math.floor(Math.random() * ($spans.length / 2));
  
  for (i = 0; i < toChange; i++) {                             // change up to a max of toChange characters
    var changing = Math.floor(Math.random() * $spans.length);  // get a random character in the original string
    if (!changed.includes(changing)) {                         // see if it has already been changed
      changed.push(changing);                                  // if not add to list of changed
      $spans.eq(changing).text(characters.substr(Math.floor(Math.random() * characters.length), 1));  // randomise letter
    }
  }
  
  intervalCount++;
  
  if (intervalCount == 5) {     // add a pause after 5 changes
    intervalCount = 0;
    clearInterval(intervalVar);
    timeoutVar = setTimeout(function() {
      setupInterval($elem);
    }, 1500);  // pause for 1.5 secs before starting loop again
  }
}

＆＃13;

body {
  font-size: 30px;
}


/* for easier hovering! */

＆＃13;

Answer 2

您可以使用mouseenter事件启动一个计时器，该计时器会混合与悬停字匹配的字母数组，并将它们写回html。然后mouseleave事件会停止计时器clearInterval并重新设置原始文本。

为了能够对多个元素设置效果，必须使用querySelectorAll进行匹配，并且需要迭代匹配的元素以设置事件：

const spans = [...document.querySelectorAll("span")]; //array of spans
const originalTexts = spans.map(span => span.textContent); //original texts
let timer = null;

//forEach to iterate over each span and set the mouseenter event
spans.forEach(span => span.addEventListener("mouseenter", ()=> {
  timer = setInterval(() => {
    let currText = span.textContent.split('');
    //shuffle the word letters
    for (let i = currText.length - 1; i > 0; i--) {
        let j = Math.floor(Math.random() * (i + 1));
        let temp = currText[i];
        currText[i] = currText[j];
        currText[j] = temp;
    }

    span.textContent = currText.join(''); //set the new word back
  }, 350);
}));

//also iterate to set the mouseleave event
spans.forEach((span, index) => span.addEventListener("mouseleave", ()=> {
  if (timer !== null){ 
    clearInterval(timer);
  }
  span.textContent = originalTexts[index];
}));

<span>Hover Me</span><br>
<span>You can also hover me</span><br>
<span>or me!!</span><br>

如果你想根据字符列表进行随机化，你只需要改变 shuffling 部分来迭代每个字母并从字符中随机获得：

const characters = 'a#ldfhas?kdjbihoEFGHIJKLMNOPQRS!adfjsd(&?aqdo0ap$dfs@dfqwqrwr';
const spans = [...document.querySelectorAll("span")];
const originalTexts = spans.map(span => span.textContent);
let timer = null;

spans.forEach(span => span.addEventListener("mouseenter", ()=> {
  timer = setInterval(() => {
    let currText = span.textContent.split('');
    //only this part is different now, that randomizes according to the characters
    for (let i = 0; i < currText.length; ++i){
      currText[i] = characters[Math.floor(Math.random() * characters.length)];
    }
    span.textContent = currText.join('');
  }, 350);
}));

spans.forEach((span, index) => span.addEventListener("mouseleave", ()=> {
  if (timer !== null){ 
    clearInterval(timer);
  }
  span.textContent = originalTexts[index];
}));

<span>Hover Me</span><br>
<span>You can also hover me</span><br>
<span>or me!!</span><br>

如何在悬停时改变每个角色？

2 个答案: