字體大小效果javascript
[英]Font size effect javascript
問題描述
我想使用JavaScript進行文本效果，例如無限制地增加文本大小和減小大小循環
JavaScript：
function fontSizer() {
if (!document.getElementById("font").style.fontSize) {
document.getElementById("font").style.fontSize = "15px";
}
if (document.getElementById("font").style.fontSize == "15px") {
document.getElementById("font").style.fontSize = "10px";
} else {
document.getElementById("font").style.fontSize = "15px"
}
}
HTML：
<p onload="fontSizer" id="font">Test</p>
4 個解決方案
解決方案1
0 2016-09-25 17:02:54
通過將onload事件與<body onload="fontSizer()>標記一起使用，可以實現文本效果。
function fontSizer() { if (!document.getElementById("font").style.fontSize) { document.getElementById("font").style.fontSize = "15px"; } if (document.getElementById("font").style.fontSize == "15px") { document.getElementById("font").style.fontSize = "30px"; } else { document.getElementById("font").style.fontSize = "15px" } }
<body onload="fontSizer()"> <p id="font">Test</p> </body>
解決方案2
0 已采納 2016-09-25 17:04:05
您可以在body onload事件上引發事件。
<body onload="init()">
<p id="font">Test</p>
</body>
如果放置它，它將調用您的函數，但這是傳遞給中間函數的一種好方法，在中間函數中，您將調用所有這些函數（如果有多個函數）：
function init() {
fontSizer();
//other method to call during the body loading
}
如果願意，我可以針對您的代碼進行以下優化：
function fontSizer() {
var element = document.getElementById("font");
if (element.style.fontSize == "15px") {
elemeny.style.fontSize = "10px";
return;
}
element.style.fontSize = "15px"
}
您也可以通過以下方式使用CSS動畫：
#font {
font-size: 15px;
-webkit-animation: theanim 4s;
-moz-animation: theanim 4s;
-o-animation: theanim 4s;
animation: theanim 4s;
}
@keyframes theanim {
from { font-size:10px; }
to { font-size:15px; }
}
解決方案3
0 2016-09-25 18:12:11
您可以不使用javascript函數，而只能使用css動畫來實現：
#font {
font-size: 15px;
-webkit-animation: theanim 4s;
-moz-animation: theanim 4s;
-o-animation: theanim 4s;
animation: theanim 4s;
}
@keyframes theanim {
from { font-size:10px; }
to { font-size:15px; }
}
解決方案4
0 2016-09-26 05:56:19
好的JavaScript無法正常工作很好它可以與動畫CSS一起正常工作
CSS：
<style>
@keyframes fadeIn {
from { font-size: 20px; color:red;}
}
.animate-flicker {
animation: fadeIn 0.2s infinite alternate;
}
</style>
的HTML
<span class="animate-flicker">Text</span>
使用JavaScript切換Google字體效果
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.