我正在开展一个项目,为我们的CS教员创建一个网站。但是有一个问题。我们希望页面上的某些元素以有意义的方式突出显示。解决方案必须是跨浏览器(即必须在IE中工作)。
因此,一个问题:
如何在现代浏览器中模仿blink
(在IE6中完美运行)(想想Chrome)?
更新 我发现this jQuery plugin会眨眼,但我们不会使用jQuery,而是希望在现代浏览器中使用CSS3后备版。
答案 0 :(得分:8)
我想知道为什么没有人建议CSS3 Animations:
@keyframes blink {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.blink {
animation: blink 600ms infinite;
}
演示on JSBin。
答案 1 :(得分:7)
您可以为此目的使用CSS text-decoration
属性:
例如:
span {
text-decoration: blink;
}
让所有span nodes
闪烁..闪烁..闪烁..闪烁..
答案 2 :(得分:4)
以下是一些模仿<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);
只需将类blink
添加到任何元素。
答案 3 :(得分:1)
只是一句话:如果你想“眨眼”一个链接,最好更改眨眼文本的颜色而不是隐藏它,因为当它被隐藏时你无法点击它,所以它变成了一个游戏尝试点击链接: - )
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”是我背景的颜色
答案 4 :(得分:1)
你不必上课。使用传统标签,只需为其添加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; }
通过JS添加直接CSS
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>