[英]<blink> in modern browsers?
I'm working on a project to create a website for our CS faculty. 我正在开展一个项目,为我们的CS教员创建一个网站。 There's one problem though.
但是有一个问题。 We want certain elements on the page highlighted in a meaningful manner.
我们希望页面上的某些元素以有意义的方式突出显示。 The solution must be cross-browser (ie must work in IE).
解决方案必须是跨浏览器(即必须在IE中工作)。
Thus, a question: 因此,一个问题:
How to emulate blink
(works perfectly in IE6) in modern browsers (think Chrome)? 如何在现代浏览器中模拟
blink
(在IE6中完美运行)(想想Chrome)?
Update: I've found this jQuery plugin to do the blinking, but we don't use jQuery and would prefer a CSS3 fallback for modern browsers. 更新:我发现这个jQuery插件可以实现闪烁,但是我们不使用jQuery,而且更喜欢现代浏览器的CSS3后备。
I wonder why no one has suggested CSS3 Animations : 我想知道为什么没有人建议CSS3动画 :
@keyframes blink {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.blink {
animation: blink 600ms infinite;
}
You can just use CSS text-decoration
property for that purpose: 您可以为此目的使用CSS
text-decoration
属性:
For example: 例如:
span {
text-decoration: blink;
}
Let all span nodes
blink.. blink.. blink.. blink.. 让所有
span nodes
闪烁..闪烁..闪烁..闪烁..
Here's some JavaScript to emulate <blink>
: 这是一些模拟
<blink>
JavaScript:
var blink = (function () {
var elems;
function blink() {
for (var i = 0; i < elems.length; i++) {
var visible = elems[i].style.visibility === 'visible';
elems[i].style.visibility = visible ? 'hidden' : 'visible';
}
}
this.start = function () {
elems = document.getElementsByClassName('blink');
setInterval(blink, 500);
};
return { start: start };
}());
addEventListener('load', blink.start);
Just add the class blink
to any element. 只需将类
blink
添加到任何元素即可。
You don't have to make a class. 你不必上课。 Use the traditional tag and simply add CSS for it.
使用传统标签,只需为其添加CSS。
Via Straight CSS:
通过Straight CSS:
/* Standard (Mozilla) */
@keyframes blink { from { opacity: 1; } to { opacity: 0; } }
/* Chrome & Safari */
@-webkit-keyframes blink { from { opacity: 1; } to { opacity: 0; } }
blink { -webkit-animation: blink 600ms infinite; animation: blink 600ms infinite; }
Straight CSS Added Via JS
直接CSS通过JS添加
if ("[object HTMLUnknownElement]" === Object.prototype.toString.call(document.createElement('blink'))) {
var head = document.head || document.getElementsByTagName("head")[0],
style = document.createElement("style");
/* Standard (Mozilla) */
style.appendChild(document.createTextNode("@keyframes blink { from { opacity: 1; } to { opacity: 0; } }"));
/* Chrome & Safari */
style.appendChild(document.createTextNode("@-webkit-keyframes blink { from { opacity: 1; } to { opacity: 0; } }"));
style.appendChild(document.createTextNode("blink { -webkit-animation: blink 600ms infinite; animation: blink 600ms infinite; text-decoration: blink; }"));
head.appendChild(style);
}
/* Standard (Mozilla) */ @keyframes blink { from { opacity: 1; } to { opacity: 0; } } /* Chrome & Safari */ @-webkit-keyframes blink { from { opacity: 1; } to { opacity: 0; } } blink { -webkit-animation: blink 600ms infinite; animation: blink 600ms infinite; }
<p><blink>I Blink</blink></p> <hr /> <p><noblink>I don't</noblink></p>
just a remark : if you want to "blink" a link, it's better to change the color of the blinked text instead of hiding it because when it's hidden you can't click on it and so it's become a game to try to click on the link :-) 只是一句话:如果你想“眨眼”一个链接,最好更改眨眼文本的颜色而不是隐藏它,因为当它被隐藏时你不能点击它,所以它变成了一个试图点击的游戏链接 :-)
function toggleBlink() {
for(var i = 0; i < blinkers.length; i++) {
if(blinkers[i].style.color == 'red') {
blinkers[i].style.color = 'white';
} else {
blinkers[i].style.color = 'red';
}
}
}
// "white" is the color of my background //“白色”是我背景的颜色
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.