<眨眼>在现代浏览器中
<blink> in modern browsers?
我正在做一个项目,为我们的CS教师创建一个网站。不过有一个问题。我们希望页面上的某些元素以有意义的方式突出显示。解决方案必须是跨浏览器的(即必须在IE中工作)。
因此,有一个问题:
如何在现代浏览器(比如Chrome)中模拟blink
(在IE6中完美工作)?
更新:我发现这个jQuery插件可以闪烁,但我们不使用jQuery,更喜欢现代浏览器的CSS3回退。
我想知道为什么没有人建议使用CSS3动画:
@keyframes blink {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.blink {
animation: blink 600ms infinite;
}
JSBin上的演示。
您只需使用CSS text-decoration
属性即可:
例如:
span {
text-decoration: blink;
}
让所有span nodes
闪烁。。眨眼眨眼眨眼
下面是一些模拟<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);
CodePen演示
只需将类blink
添加到任何元素即可。
您不必创建一个类。使用传统标签,只需添加CSS即可。
通过直通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>
只是一句话:如果你想"闪烁"一个链接,最好改变闪烁文本的颜色,而不是隐藏它,因为当它被隐藏时,你无法点击它,所以尝试点击链接变成了一个游戏:-)
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';
}
}
}
//"白色"是我的背景的颜色
相关文章:
- 访问布局信息是否也会导致浏览器重排
- 如何隐藏空<span>在IE中使用javascript.(注意,在其他浏览器中工作正常)
- 我如何使HTML5<输入类型=月份>以在所有浏览器上工作
- 如何克隆<浏览器>元素
- 浏览器在<输入类型=“;文件“>
- <眨眼>在现代浏览器中
- 为什么浏览器在<选择>要素
- <输入类型='文件'>提供了URL编码的文件名,导致Android本机浏览器上的FileRea
- Node Selenium WebDriver-目标浏览器必须是字符串,但为<对象>
- <头部>使用浏览器打开时不加载脚本
- 如何制作<输入类型=“;日期“>所有浏览器都支持吗?任何替代方案
- 如何收听<a>通过浏览器控制台使用AngularJS构建的元素
- 我可以要求浏览器不要运行<脚本>s在元素中
- Flexslider<李>高度's等于最高的<李>在移动浏览器上
- <输入类型=“;文件“>在IE6中打开浏览器窗口,点击文本字段区域作为Firefox
- 浏览器缓存图像,刷新<img/>使用jQuery,图像不会更改
- 较差的浏览器性能取消隐藏一个大(>1000行,20列)表
- 显示新行<br>在数据库中时 在浏览器中
- 浏览器渲染svg<clipPath>至<剪辑路径>
- 替换<td>其中<tr>取决于浏览器宽度