Question

所以我有这个功能，当打开页面时，Blockquote中的单词会有模糊效果，但我的问题是，我希望这个功能适用于所有Blockquotes和不同的div，但它不起作用，仅适用于最高一个在HTML中。我试图找到解决方案，但无法找到解决方案可以帮助我或我根本不理解。

我该如何解决这个问题？

＆＃13;

time

＆＃13;

function splitWords() {
  let quote = document.querySelector("blockquote q");
  quote.innerText.replace(/(<([^>]+)>)/ig,"");
  quotewords = quote.innerText.split(" "),
  wordCount = quotewords.length;
  quote.innerHTML = "";
  for (let i=0; i < wordCount; i++) {
    quote.innerHTML += "<span>"+quotewords[i]+"</span>";
    if (i < quotewords.length - 1) {
      quote.innerHTML += " ";
    }
  }
  quotewords = document.querySelectorAll("blockquote q span");
  fadeWords(quotewords);
}

function getRandom(min, max) {
  return Math.random() * (max - min) + min;
}

function fadeWords(quotewords) {
  Array.prototype.forEach.call(quotewords, function(word) {
    let animate = word.animate([{
      opacity: 0,
      filter: "blur("+getRandom(2,5)+"px)"
    }, {
      opacity: 1,
      filter: "blur(0px)"
    }],
    {
      duration: 1000,
      delay: getRandom(500,3300),
      fill: 'forwards'
    }
   )
  })
}


splitWords();

＆＃13;

.border {

 width:100%;

 height:300px;
 background-color:#b2800a;
 min-width:1200px;


}

.borderimg {
 width:100%;
 content:url("border.png");

 min-width:1200px;
}
.background

{

 width:100%;
 content:url("Background.png");

}
body {
 background-color:#b2800a;
 padding:0;
 margin: 0;
 min-width:auto;
}


.header
{
position:absolute;
font-size:70;
color:white;
left 1000px;



 opacity: 0.7;

}



*
{
  box-sizing: border-box;
}

blockquote {
  font-size: 3rem;

}

blockquote q {
  font-family: Georgia, serif;
  font-style: italic;
  letter-spacing: .1rem;
}
blockquote q span {
  will-change: opacity, filter;
  opacity: 0;
  filter: blur(0px);
}
q {

  quotes: "“" "”" "‘" "’";
}
q:before {
    content: open-quote;
    margin-right: .8rem;
}
q:after {

}
q:before, q:after {
  color: #ccc;
  font-size: 4rem;
}

.text1 {
font-size:80px;
top:160px;

color:white;
position:absolute;
opacity: 0.7;


}

＆＃13;

Answer 1

这是我做出改变的地方，

Analyzing dependencies
Downloading dependencies
Installing Firebase (4.13.0)

[!] Error installing Firebase [!] /usr/bin/curl -f -L -o /var/folders/8y/24chrcxx1jb20tf7knths56c0000gn/T/d20180505-5700-19mr5c1/file.tgz https://dl.google.com/dl/cpdc/b64ddeea923b5ab5/Firebase-4.13.0.tar.gz --create-dirs --netrc-optional

% Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                             Dload  Upload   Total   Spent    Left  Speed  0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0 curl: (22) 
**The requested URL returned error: 404**

  let quote = [ ] ;
  quote = document.querySelectorAll("blockquote q");
  for (let x = 0 ; x < quote.length ; x++) {

function splitWords() {
  let quote = [ ] ;
  quote = document.querySelectorAll("blockquote q");
  for (let x = 0 ; x < quote.length ; x++) {
  quotewords = quote[x].innerText.split(" "),
  quote[x].innerHTML = "";
  for (let i=0; i < quotewords.length; i++) {
    quote[x].innerHTML += "<span>"+quotewords[i]+"</span>";
    if (i < quotewords.length - 1) {
      quote[x].innerHTML += " ";
    }
  }
  quotewords = document.querySelectorAll("blockquote q span");
  fadeWords(quotewords);
}
}

function getRandom(min, max) {
  return Math.random() * (max - min) + min;
}

function fadeWords(quotewords) {
  Array.prototype.forEach.call(quotewords, function(word) {
    let animate = word.animate([{
      opacity: 0,
      filter: "blur("+getRandom(2,5)+"px)"
    }, {
      opacity: 1,
      filter: "blur(0px)"
    }],
    {
      duration: 1000,
      delay: getRandom(500,3300),
      fill: 'forwards'
    }
   )
  })
}


splitWords();

.border {

 width:100%;

 height:300px;
 background-color:#b2800a;
 min-width:1200px;


}

.borderimg {
 width:100%;
 content:url("border.png");

 min-width:1200px;
}
.background

{

 width:100%;
 content:url("Background.png");

}
body {
 background-color:#b2800a;
 padding:0;
 margin: 0;
 min-width:auto;
}


.header
{
position:absolute;
font-size:70;
color:white;
left 1000px;



 opacity: 0.7;

}



*
{
  box-sizing: border-box;
}

blockquote {
  font-size: 3rem;

}

blockquote q {
  font-family: Georgia, serif;
  font-style: italic;
  letter-spacing: .1rem;
}
blockquote q span {
  will-change: opacity, filter;
  opacity: 0;
  filter: blur(0px);
}
q {

  quotes: "“" "”" "‘" "’";
}
q:before {
    content: open-quote;
    margin-right: .8rem;
}
q:after {

}
q:before, q:after {
  color: #ccc;
  font-size: 4rem;
}

.text1 {
font-size:80px;
top:160px;

color:white;
position:absolute;
opacity: 0.7;


}

函数（JS）仅适用于最高div / quote

1 个答案: