我有一个按钮列表,这些按钮的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>
答案 0 :(得分:0)
您可以为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;
}