javascript - 在不改变其他 li 位置的情况下调整 li 的大小

Question

我有一个按钮列表，其 onclick 函数对 p 项列表产生影响。函数 3 和函数 5 更改相应 p 元素的字体大小，导致其他 p 被推离其原始位置。我想阻止这种情况以保持 p 最初的显示方式。提前致谢。 https://github.com/jusselman/clickFun

function myFunction() {
  var el = document.getElementById("topTitle");

  if (el.style.transform === "translateY(350px)" && el.style.color === "blue" && el.style.fontSize === "54px") {
    el.style.transform = "translateY(0px)";
    el.style.color = "black";
    el.style.fontSize = "32px";
    el.style.transition = "all 1s linear";
  } else {
    el.style.transform = "translateY(350px)"
    el.style.transition = "all 1s linear";
    el.style.color = "blue";
    el.style.fontSize = "54px";
  }
};

function myFunction1() {
  var el1 = document.getElementById("display1");

  if (el1.style.opacity === "1") {
    el1.style.transition = "opacity 1s linear";
    el1.style.opacity = "0";
  } else {
    el1.style.transition = "opacity 1s linear";
    el1.style.opacity = "1";
  }
};

function myFunction2() {
  var el2 = document.getElementById("display2");

  if (el2.style.opacity === "0") {
    el2.style.transition = "opacity 1s linear";
    el2.style.opacity = "1";
  } else {
    el2.style.transition = "opacity 1s linear";
    el2.style.opacity = "0";
  }
}

function myFunction3() {
  var el3 = document.getElementById("display3");

  if (el3.style.fontSize === "40px") {
    el3.style.transition = "font-size 1s linear";
    el3.style.fontSize = "16px";
  } else {
    el3.style.transition = "font-size 1s linear";
    el3.style.fontSize = "40px";
  }
}

function myFunction4() {
  var el4 = document.getElementById("display4");
  // el3.style.transition = "transform 1s linear";
  // el3.style.transform = "rotate(180deg)";

  if (el4.style.transform === "rotate(180deg)") {
    el4.style.transition = "transform 1s linear";
    el4.style.transform = "rotate(0deg)";
  } else {
    el4.style.transition = "transform 1s linear";
    el4.style.transform = "rotate(180deg)";
  }

}

function myFunction5() {
  var el5 = document.getElementById("display5");
  // el3.style.transition = "transform 1s linear";
  // el3.style.transform = "rotate(180deg)";

  if (el5.style.transform === "translate(500px)") {
    el5.style.transition = "transform 1s linear";
    el5.style.transform = "translate(0)";
  } else {
    el5.style.transition = "transform 1s linear";
    el5.style.transform = "translate(500px)";
  }

}

function myFunction5() {
  var el5 = document.getElementById("display5");

  if (el5.style.transform === "translateX(450px) rotate(360deg)" && el5.style.fontSize === "80px") {
    el5.style.transition = "all 1s linear";
    el5.style.transform = "translatex(0) rotate(0)";
    el5.style.fontSize = "16px";
  } else {
    el5.style.transition = "all 1s linear";
    el5.style.transform = "translateX(450px) rotate(360deg)";
    el5.style.fontSize = "80px";


  }

}

function myFunction6() {
  var el6 = document.getElementById("display6");

  if (el6.style.transform === "translate(250px) rotate(360deg)") {
    el6.style.transition = "transform 1s linear";
    el6.style.transform = "translate(0) rotate(0)"
  } else {
    el6.style.transition = "transform 1s linear";
    el6.style.transform = "translate(250px) rotate(360deg)";


  }

}

body,
html {
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.blackBoard img {
  /* height: 500px;
  width: 500px; */
  top: 0;
  left: 0;
  position: absolute;
  /* background-image: url("../img/mirror.jpg"); */
}

h1.title {
  text-align: center;
  /* top: 25%; */
  height: 550px;
  color: black;
}

ul.buttons {
  width: 10%;
  margin: 0 auto;
  display: block;
  list-style: none;
  /* margin-top: 500px; */
  top: 25%;
  left: 16%;
  transform: translate(-50%, -50%);
  position: absolute;
}

li {
  display: block;
}

button.effects {
  height: 30px;
  width: 90px;
  background-color: grey;
  border-radius: 10%;
  color: white;
}

#display1 {
  opacity: 0;
}

#display2 {
  opacity: 1;
}

#display3 {
  font-size: 16px;
}

p.textDisplay {
  position: relative;
  text-align: center;
}

ul.texts {
  width: 10%;
  margin: 0 auto;
  display: block;
  list-style: none;
  /* margin-top: 500px; */
  top: 24%;
  left: 22%;
  transform: translate(-50%, -50%);
  position: absolute;
  /* overflow: hidden; */
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Shine</title>
</head>

<body>
  <h1 class="title" id="topTitle">The onclick Event</h1>

  <div class="blackBoard">
    <img src="img/mirror.png">
    <div class="container">
      <ul class="buttons">
        <li>
          <button onclick="myFunction()" class="effects">Move Title</button>
        </li>
        <li>
          <button onclick="myFunction1()" class="effects">Function 1</button>
        </li>
        <li>
          <button onclick="myFunction2()" id="btn2" class="effects">Function 2</button>
        </li>
        <li>
          <button onclick="myFunction3()" id="btn3" class="effects">Function 3</button>
        </li>
        <li>
          <button onclick="myFunction4()" id="btn4" class="effects">Function 4</button>
        </li>
        <li>
          <button onclick="myFunction5()" id="btn5" class="effects">Function 5</button>
        </li>
        <li>
          <button onclick="myFunction6()" id="btn6" class="effects">Function 6</button>
        </li>
      </ul>
    </div>

    <div class="text-container">
      <ul class="texts">
        <li>
          <p id="display1" class="textDisplay">Display #1</p>
        </li>
        <li>
          <p id="display2" class="textDisplay">Display #2</p>
        </li>
        <li>
          <p id="display3" class="textDisplay">Display #3</p>
        </li>
        <li>
          <p id="display4" class="textDisplay">Display #4</p>
        </li>
        <li>
          <p id="display5" class="textDisplay">Display #5</p>
        </li>
        <li>
          <p id="display6" class="textDisplay">Display #6</p>
        </li>
      </ul>
    </div>
  </div>
</body>

</html>

Answer 1

除了动画font-size，你可以动画scale来增加文本的大小而不影响页面上其他任何东西的位置。片段中的示例代码:

// var  elTrans = style.transition;
// var opac1 = "opacity 1s linear";
function myFunction() {
  var el = document.getElementById("topTitle");

  if(el.style.transform === "translateY(350px)" && el.style.color === "blue" && el.style.fontSize === "54px") {
    el.style.transform = "translateY(0px)";
    el.style.color = "black";
    el.style.fontSize = "32px";
    el.style.transition = "all 1s linear";
    } else {
    el.style.transform = "translateY(350px)"
    el.style.transition = "all 1s linear";
    el.style.color = "blue";
    el.style.fontSize = "54px";
   }
};

function myFunction1() {
  var el1 = document.getElementById("display1");

  if(el1.style.opacity === "1") {
    el1.style.transition = "opacity 1s linear";
    el1.style.opacity = "0";
  } else {
    el1.style.transition = "opacity 1s linear";
    el1.style.opacity = "1";
  }
};

function myFunction2() {
  var el2 = document.getElementById("display2");

  if(el2.style.opacity === "0") {
    el2.style.transition = "opacity 1s linear";
    el2.style.opacity = "1";
  } else {
    el2.style.transition = "opacity 1s linear";
    el2.style.opacity = "0";
  }
}

function myFunction3() {
  var el3 = document.getElementById("display3");

  if(el3.style.transform === "scale(2.5)") {
    el3.style.transition = "transform 1s linear";
    el3.style.transform = "scale(1)";
  } else {
    el3.style.transition = "transform 1s linear";
    el3.style.transform = "scale(2.5)";
  }
}

function myFunction4() {
  var el4 = document.getElementById("display4");
  // el3.style.transition = "transform 1s linear";
  // el3.style.transform = "rotate(180deg)";

  if(el4.style.transform === "rotate(180deg)") {
    el4.style.transition = "transform 1s linear";
    el4.style.transform = "rotate(0deg)";
  } else {
    el4.style.transition = "transform 1s linear";
    el4.style.transform = "rotate(180deg)";
  }

}

function myFunction5() {
  var el5 = document.getElementById("display5");
  // el3.style.transition = "transform 1s linear";
  // el3.style.transform = "rotate(180deg)";

  if(el5.style.transform === "translate(500px)") {
    el5.style.transition = "transform 1s linear";
    el5.style.transform = "translate(0)";
  } else {
    el5.style.transition = "transform 1s linear";
    el5.style.transform = "translate(500px)";
  }

}

function myFunction5() {
  var el5 = document.getElementById("display5");

  if(el5.style.transform === "translateX(450px) rotate(360deg) scale(4)") {
    el5.style.transition = "all 1s linear";
    el5.style.transform = "translatex(0) rotate(0) scale(1)";
    } else {
    el5.style.transition = "all 1s linear";
    el5.style.transform = "translateX(450px) rotate(360deg) scale(4)";
  }
}

function myFunction6() {
  var el6 = document.getElementById("display6");

  if(el6.style.transform === "translate(250px) rotate(360deg)") {
    el6.style.transition = "transform 1s linear";
    el6.style.transform = "translate(0) rotate(0)"
    } else {
    el6.style.transition = "transform 1s linear";
    el6.style.transform = "translate(250px) rotate(360deg)";


  }

}

body, html {
  padding: 0;
  margin: 0;
  overflow: hidden;
}

h1.title {
  text-align: center;
  height: 550px;
  color: black;
}

ul.buttons {
  width: 10%;
  margin: 0 auto;
  display: block;
  list-style: none;
  top: 25%;
  left: 16%;
  transform: translate(-50%,-50%);
  position: absolute;
}

li {
  display: block;
}

button.effects {
  height: 30px;
  width: 90px;
  background-color: grey;
  border-radius: 10%;
  color: white;
}


#display1 {
    opacity: 0;
}

#display2 {
    opacity: 1;
}

#display3 {
    font-size: 16px;
}

p.textDisplay {
  position: relative;
  text-align: center;
}

ul.texts {
  width: 10%;
  margin: 0 auto;
  display: block;
  list-style: none;
  top: 34%;
  left: 32%;
  transform: translate(-50%,-50%);
  position: absolute;
}

<h1 class="title" id="topTitle">The onclick Event</h1>

<div class="container">
  <ul class="buttons">
    <li>
    <button onclick="myFunction()" class="effects">Move Title</button>
  </li>
    <li>
    <button onclick="myFunction1()" class="effects">Function 1</button>
  </li>
  <li>
    <button onclick="myFunction2()" id="btn2" class="effects" >Function 2</button>
  </li>
  <li>
    <button onclick="myFunction3()" id="btn3" class="effects">Function 3</button>
  </li>
  <li>
    <button onclick="myFunction4()" id="btn4" class="effects" >Function 4</button>
  </li>
  <li>
    <button onclick="myFunction5()" id="btn5" class="effects" >Function 5</button>
  </li>
  <li>
    <button onclick="myFunction6()" id="btn6" class="effects" >Function 6</button>
  </li>
  </ul>
</div>

<div class="text-container">
  <ul class="texts">
    <li>
      <p id="display1" class="textDisplay">Display #1</p>
    </li>
    <li>
      <p id="display2" class="textDisplay">Display #2</p>
    </li>
    <li>
      <p id="display3" class="textDisplay">Display #3</p>
    </li>
    <li>
      <p id="display4" class="textDisplay">Display #4</p>
    </li>
    <li>
      <p id="display5" class="textDisplay">Display #5</p>
    </li>
    <li>
      <p id="display6" class="textDisplay">Display #6</p>
    </li>
  </ul>
</div>
</div>