闪烁文本跨浏览器
[英]Blinking text cross browser
问题描述
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，谷歌Chrome Safari，Opera。）
11 个解决方案
解决方案1
40 已采纳 2011-11-29 21:46:33
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在内部有点哭。
解决方案2
11 2013-06-20 00:41:11
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; }
}
解决方案3
5 2013-08-11 22:32:15
var el = $(".blink");
setInterval(function() {el.toggle()}, 500);
解决方案4
2 2013-08-09 12:07:04
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;
}
}
解决方案5
1 2013-09-03 15:18:10
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" : "";
}
}
解决方案6
1 2014-07-04 11:09:41
<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>
解决方案7
1 2015-01-07 06:08:00
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>
解决方案8
1 2011-02-04 05:12:00
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文件，并在要闪烁的元素上给出类名“blink”。
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（“可见性“，”隐藏或可见“）。
解决方案9
0 2015-05-07 18:07:38
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. 它看起来很像旧版本，而且它也使用相同。
解决方案10
0 2017-02-21 03:30:33
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>
解决方案11
0 2011-02-26 04:37:09
You can also use this: 你也可以用这个：
function blinkIt() {
if (!document.all) return;
else {
for(i=0;i<document.all.tags('blink').length;i++){
s=document.all.tags('blink')[i];
s.style.visibility=(s.style.visibility=='visible') ?'hidden':'visible';
}
}
}
You may use a timer instead of using the tag. 您可以使用计时器而不是使用标签。 I have tested this on IE7 and Firefox. 我在IE7和Firefox上测试了这个。 Both browsers allow this, however Chrome doesn't work properly. 两种浏览器都允许这样做，但Chrome无法正常运行。 Hope you got the answer. 希望你能得到答案。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.