字体大小效果javascript
[英]Font size effect javascript
问题描述
I want to text effect like text increase size and decrease size loop with no limit using JavaScript 
我想使用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: HTML：
<p onload="fontSizer" id="font">Test</p>
4 个解决方案
解决方案1
0 2016-09-25 17:02:54
The text effect can be achieved by using onload event with <body onload="fontSizer()> tag. 通过将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
you can raise the event on the body onload event. 您可以在body onload事件上引发事件。
<body onload="init()">
<p id="font">Test</p>
</body>
This will call your function if you put it but one good way it to pass to an intermediate function where you call all this kinf of function (if you have several) : 如果放置它，它将调用您的函数，但这是传递给中间函数的一种好方法，在中间函数中，您将调用所有这些函数（如果有多个函数）：
function init() {
fontSizer();
//other method to call during the body loading
}
And if you want i can purpose you the following optimization for your code : 如果愿意，我可以针对您的代码进行以下优化：
function fontSizer() {
var element = document.getElementById("font");
if (element.style.fontSize == "15px") {
elemeny.style.fontSize = "10px";
return;
}
element.style.fontSize = "15px"
}
You can also use css animation by using something like : 您也可以通过以下方式使用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
You can do it without javascript function, only with css animation : 您可以不使用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
Well JavaScript not work Good Its work fine with animation css 好的JavaScript无法正常工作很好它可以与动画CSS一起正常工作
CSS: CSS：
<style>
@keyframes fadeIn {
from { font-size: 20px; color:red;}
}
.animate-flicker {
animation: fadeIn 0.2s infinite alternate;
}
</style>
HTML 的HTML
<span class="animate-flicker">Text</span>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.