在前面的“setTimeout无效的解决方案”中，有提到一个案件：就是画面中的元素的背景色需要定时进行切换。
之前这个效果也是需要通过setTimeout实现的。不过，最近看到CSS3中有关于动画的介绍，我想了一下，应该也是可以通过动画来实现这个背景切换的效果的。
今天试了一下，果然可以。
demo的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>animation sample</title>
<style>
.bgClass {
float: left;
width: 50px;
height: 50px;
margin: 2px;
border: 1px solid gray;
}
</style>
<script>
var idx = 1;
var id = "styleForBgColorAnimation";
var bgColorRules = [];
function chgBgColor() {
var startColor;
var endColor;
if(idx == 1 ) {
startColor = "#0f0";
endColor = "#060";
} else if(idx == 2) {
startColor = "#FAA165";
endColor = "#FD6906";
} else if(idx == 3 ) {
startColor = "#040404";
endColor = "#000";
}
// 生成keyframe的名称。
var ruleName = createBgColorRuleName(startColor, endColor);
// 如果keyframe的名称已经存在，则说明此动画已经添加至css中，无须再次添加
// 如果不存在，则新生成动画并添加至画面中
if(bgColorRules.indexOf(ruleName) == -1) {
// 生成keyframe
createBgColorRule(startColor, endColor, ruleName);
// 缓存keyframe名称
bgColorRules.push(ruleName);
}
var tmp = -1;
// 对指定元素应用新生成的动画
for((tmp = idx * 3 - 2); tmp <= idx * 3; tmp++) {
// ruleName 为某个keyframe名称，须已经定义好
// 1.2s 为整个动画所需要时间
// infinite 为无限循环动画
document.querySelector("#bg" + tmp).style.webkitAnimation = ruleName + " 1.2s linear 0s infinite";
}
if(idx++ == 3) {
document.querySelector("#chgBgButton").disabled = true;
}
}
// 根据开始色与终了色生成 keyframe 名称
function createBgColorRuleName(startColor, endColor) {
return ("ChgBgColor-" + startColor.substring(1) + "-" + endColor.substring(1)).toLowerCase();
}
// 根据开始色与终了色生成 动画 内容
function createBgColorRule(startColor, endColor, ruleName) {
var sheet = getStyleById(id);
// 因为整个动画所需要的时间为1.2秒, 此处 0%和50%、51%和100%分别设置成一样的背景色，就是为了让这两个背景色平分这1.2秒
var rule = "@-webkit-keyframes " + ruleName + " { " +
"0% { background: -webkit-gradient(linear, left top, right bottom, from(" + startColor + "), to(" + endColor + "));} " +
"50% { background: -webkit-gradient(linear, left top, right bottom, from(" + startColor + "), to(" + endColor + "));} " +
"51% { background: white;} " +
"100% { background: white;} ";
sheet.insertRule(rule, 0);
}
function getStyleById(styleId) {
var style = document.querySelector("#" + styleId);
if(style) {
return style.sheet;
} else {
var styleSheetElement = document.createElement("style");
styleSheetElement.id = styleId;
return (document.head.appendChild(styleSheetElement)).sheet;
}
}
</script>
</head>
<body>
<div>
<button type="button" id="chgBgButton" onclick="chgBgColor()">createBgColorRule</button>
</div>
<div>
<div id="bg1" class="bgClass">bg1</div>
<div id="bg2" class="bgClass">bg2</div>
<div id="bg3" class="bgClass">bg3</div>
<div id="bg4" class="bgClass">bg4</div>
<div id="bg5" class="bgClass">bg5</div>
<div id="bg6" class="bgClass">bg6</div>
<div id="bg7" class="bgClass">bg7</div>
<div id="bg8" class="bgClass">bg8</div>
<div id="bg9" class="bgClass">bg9</div>
</div>
</body>
</html>
相关推荐
本篇文章将深入探讨这个问题，并提供有效的解决方案。 `setTimeout`是一个异步执行的函数，它允许开发者在指定的时间间隔后执行一段代码。通常，这个函数在网页的主线程中运行，而模态对话框会阻塞主线程，等待用户...
本文将深入探讨这个问题的原因，并提供有效的解决方案。 首先，理解`setTimeout`的工作原理至关重要。`setTimeout`函数用于在指定的时间间隔后执行一个函数或一段代码。它返回一个唯一的ID，可以用来取消已设置的...
本文将详细解析这个问题的原因及解决方案。 首先，`setTimeout`和`setInterval`是JavaScript中的两个常用定时器函数。`setTimeout`用于在指定延迟后执行一次回调函数，而`setInterval`则会在指定间隔后反复执行回调...
本文将详细讲解如何解决Vue中在`setTimeout`内部修改变量无效的问题。 首先，我们要理解`setTimeout`的工作原理。`setTimeout`是一个异步操作，它会将传入的回调函数放入事件队列，等待一段时间后执行。在这个过程...
本文将深入探讨这两个函数在IE浏览器中的兼容性问题，并提出相应的解决方案。 #### 二、`setTimeout` 的兼容性问题 `setTimeout` 函数允许开发者指定一段代码在一定时间延迟后执行。它有两种基本用法： 1. **执行一...
本文将深入探讨在使用`setTimeout`进行递归调用时出现的问题以及解决方案。 首先，让我们分析问题的核心：当不加引号地直接传递函数名作为`setTimeout`的第一个参数时，如`setTimeout(refreshNum, 3000)`，某些...
#### 方案三：永久帧（Forever Frame） 永久帧利用了HTML的`<iframe>`元素，创建一个隐藏的框架持续请求一个HTTP 1.1 trunked编码的文档。服务器不断地在文档中追加内容，通过`<script>`标签调用父页面的回调函数。...
本文将深入探讨这个问题，并提供解决方案。 首先，我们要了解`resize`事件的基本概念。在Web开发中，这个事件通常绑定在`window`对象上，用于检测浏览器窗口大小的变化。当用户调整窗口大小时，`resize`事件会触发...
另一种解决方案是使用字符串形式的函数调用，但这不推荐，因为它不便于调试且不利于代码维护： ```javascript setTimeout("showT(" + (t - 1) + ")", 5000); ``` 在jQuery环境中，如果需要更新按钮的文本并禁用它...
《电梯：我的电梯传奇游戏解决方案》 在编程世界中，JavaScript是一种广泛应用的脚本语言，尤其在Web开发领域占据着核心地位。在这个“elevator:我的电梯传奇游戏解决方案”中，我们探讨的是利用JavaScript来创建一...
本文将深入探讨这个问题，并提供相应的解决方案。 首先，当事件被解绑时，click事件可能失效。例如，使用jQuery的`unbind()`方法移除事件处理程序后，再次尝试绑定click事件可能不起作用。为避免这种情况，应确保在...
在IT行业中，"无效效应"可能是指某个编程技术或设计模式在特定情况下的不适用性。结合提供的信息，我们可以推测这是一个使用paper.js库...通过深入学习和实践，可以有效地避免或解决“无效效应”，实现理想的动画效果。
分步介绍，先给大家介绍IE7浏览器窗口大小改变事件执行多次bug，具体问题分析及解决方案请看下文。 var resizeTimer = null; $(window).resize(function() { if (resizeTimer) clearTimeout(resizeTimer); ...
在IT行业中，JavaScript是一种至...解决这些问题通常需要仔细检查代码，使用开发者工具进行调试，并参考相关文档和社区资源来找到解决方案。在JavaScript的学习过程中，不断实践、调试和修复错误是提升技能的重要途径。
本文将根据提供的内容，详细讲解一些常见的CSS设计在不同浏览器，特别是IE6-8中的兼容性问题及解决方案。 首先，我们关注的是按钮的兼容性问题。在IE6中，按钮元素可能会对后续元素产生额外影响，因此我们需要初始...
在这种情况下，原生JavaScript的事件监听机制可能会遇到延迟或失效的问题，使用setTimeout()可以作为一种临时解决方案，帮助确保某些操作能够在正确的时机执行。 总结来说，本篇文档提供了一个在动态内容场景下确保...
在ASP.NET开发中，我们经常会遇到使用后端代码注册脚本来动态生成前端的JavaScript，以实现页面的交互功能...同时，利用浏览器的开发工具进行调试是定位此类问题的关键，它可以帮助我们理解问题的本质并找到解决方案。
针对这个问题，我们可以采取以下两种解决方案： 1. 在`onclick`事件中添加`return false`： ```javascript (0)">GoNext $(“a”).click(function(){ window.location.href = “xxx.html”; return false; // 阻止...
为了解决这个问题，提供了一种解决方案，即使用`setTimeout()`函数将`alert()`或`confirm()`包装起来。这是因为`setTimeout()`函数会将回调函数放入事件队列，而不是立即执行，这样就可以避免阻塞主线程，让页面有...