Javascript 闪烁文本跨浏览器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4894488/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Blinking text cross browser
提问by enthusiastic
I want to make a blinking text.
我想制作一个闪烁的文字。
First I tried the <blink>HTML tag, but it is only supported in Mozilla Firefox.
首先我尝试了<blink>HTML 标签，但它只在 Mozilla Firefox 中受支持。
Then I tried CSS:
然后我尝试了 CSS：
<style>
.blink {text-decoration: blink; }
</style>
It's not working on IE 6.
它不适用于 IE 6。
Then I tried javascript:
然后我尝试了 javascript：
<script type="text/javascript">
function doBlink() {
// Blink, Blink, Blink...
var blink = document.all.tags("BLINK")
for (var i=0; i < blink.length; i++)
blink[i].style.visibility = blink[i].style.visibility == "" ? "hidden" : ""
}
function startBlink() {
if (document.all)
setInterval("doBlink()",500)
}
window.onload = startBlink;
</script>
Now it's not working on Safari or Chrome.
现在它不适用于 Safari 或 Chrome。
Can anybody help me use blinking text which will run on all the different popular browsers? (IE 6, Mozilla Firefox, Google Chrome Safari, Opera.)
任何人都可以帮助我使用可以在所有不同流行浏览器上运行的闪烁文本吗？（IE 6、Mozilla Firefox、Google Chrome Safari、Opera。）
回答by Jesse Hattabaugh
This can be achieved with CSS3 like so
这可以像这样用 CSS3 实现
@-webkit-keyframes blink {
from {
opacity: 1.0;
}
to {
opacity: 0.0;
}
}
blink {
-webkit-animation-name: blink;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: cubic-bezier(1.0, 0, 0, 1.0);
-webkit-animation-duration: 1s;
}
It even has a nice fade effect. Works fine in Safari, but Chrome cries a little on the inside.
它甚至有一个很好的淡入淡出效果。在 Safari 中运行良好，但 Chrome 在内部有点哭闹。
回答by bkellgren
The truly cross browser / legacy browser blink tag...
真正的跨浏览器/旧版浏览器闪烁标签...
HTML
HTML
<!DOCTYPE html>
<html>
<blink>ULTIMATE BLINK TAG!</blink>
<!--[if lt IE 10]>
<script>
toggleItem = function(){
var el = document.getElementsByTagName('blink')[0];
if (el.style.display === 'block') {
el.style.display = 'none';
} else {
el.style.display = 'block';
}
}
setInterval(toggleItem, 1000);
</script>
<![endif]-->
</html>
CSS
CSS
blink {
-webkit-animation: blink 1s steps(5, start) infinite;
-moz-animation: blink 1s steps(5, start) infinite;
-o-animation: blink 1s steps(5, start) infinite;
animation: blink 1s steps(5, start) infinite;
}
@-webkit-keyframes blink {
to { visibility: hidden; }
}
@-moz-keyframes blink {
to { visibility: hidden; }
}
@-o-keyframes blink {
to { visibility: hidden; }
}
@keyframes blink {
to { visibility: hidden; }
}
回答by Laukhin Andrey
var el = $(".blink");
setInterval(function() {el.toggle()}, 500);
回答by zpon
Simple jquery implementation, feel free to extend to fit your needs http://jsfiddle.net/L69yj/
简单的 jquery 实现，随意扩展以满足您的需求http://jsfiddle.net/L69yj/
var element = $(".blink");
var shown = true;
setInterval(toggle, 500);
function toggle() {
if(shown) {
element.hide();
shown = false;
} else {
element.show();
shown = true;
}
}
回答by Prakash
Try this jQuery
试试这个 jQuery
function blinks(hide) {
if (hide === 1) {
$('.blink').show();
hide = 0;
}
else {
$('.blink').hide();
hide = 1;
}
setTimeout("blinks("+hide+")", 400);
}
$(document).ready(function(){
blinks(1);
});
Note : include the jquery file and give a class name 'blink' on element which you want to blink.
注意：包含 jquery 文件并在要闪烁的元素上指定类名“闪烁”。
Tip: .show() and .hide() doesn't not reserve the width and height of the element... If you need to hide the element, but not his place (dimentions) at the document, use .css("visibility", "hidden or visible") instead.
提示： .show() 和 .hide() 不会保留元素的宽度和高度...如果您需要隐藏元素，但不是他在文档中的位置（尺寸），请使用 .css("可见性”、“隐藏或可见”）。
回答by Wolf
Works in IE 10, Firefox 23.0.1, Google Chrome 29.0, Opera 16.0
适用于 IE 10、Firefox 23.0.1、Google Chrome 29.0、Opera 16.0
blink(0.7);
function blink(speed) {
if (speed) {
if (document.getElementsByTagName('blink'))
setInterval("blink()", speed*2000);
return;
}
var blink = document.getElementsByTagName('blink');
for (var i=0; i<blink.length; i++) {
blink[i].style.visibility = blink[i].style.visibility == "" ? "hidden" : "";
}
}
回答by Ankur Kumar
<p id="blink">My name is Ankurji1989</p>
<script type="text/javascript">
var blink_line = document.getElementById("blink");
function d_block(){
if(blink_line.style.visibility=='hidden')
{
blink_line.style.visibility='visible';
}
else{
blink_line.style.visibility='hidden';
}
}
setInterval(function(){d_block();}, 1000);
</script>
回答by user2619700
It is working smoothly in all the browsers...Please try it it will work
它在所有浏览器中都能顺利运行...请尝试它会起作用
<script type="text/javascript">
function blinker()
{
if(document.getElementById("blink"))
{
var d = document.getElementById("blink") ;
d.style.color= (d.style.color=='red'?'white':'red');
setTimeout('blinker()', 500);
}
}
</script>
<body onload="blinker();">
<div id="blink">Blinking Text</div>
</body>
回答by Josh Anderson
This works great:
这很好用：
<script type="text/javascript">
function blinker()
{
if(document.querySelector("blink"))
{
var d = document.querySelector("blink") ;
d.style.visibility= (d.style.visibility=='hidden'?'visible':'hidden');
setTimeout('blinker()', 500);
}
}
</script>
<body onload="blinker();">
<blink>Blinking Text</blink>
</body>
It looks really like the old version, plus it is used the same too.
它看起来很像旧版本，而且使用方式也一样。
回答by Peterp
This is not my code, but it works well in our web site. Only problem is that It works if included in the html but not when referenced as a seperate script.
这不是我的代码，但它在我们的网站上运行良好。唯一的问题是它在包含在 html 中时有效，但在作为单独的脚本引用时无效。
<style>
#blinker { color: #58bf7a }
#blinker.on { color: #58d878 }
</style>
<script>
var blinker;
function blink() {
blinker.className = blinker.className ? "" : "on";
}
window.onload = function() {
blinker = document.getElementById("blinker");
var interval_id = setInterval(blink, 1000);
}
</script>
