在前面的“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>
相关推荐
NULL 博文链接:https://rainbow702.iteye.com/blog/2040293
NULL 博文链接:https://rainbow702.iteye.com/blog/2040051
主要介绍了解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
关于JS定时器(setTimeout setInterval)定时不准问题1
setTimeout,javascript 延时执行函数,闭包处理 利用javascript闭包处理延时操作
setTimeout()从载入后延迟指定的时间去执行一个表达式或者是函数;仅执行一次 ;和window.clearTimeout一起使用.我在 代码如下:$(document).ready(function(){setTimout(test(),200); function test() { alert(1&#...
主要介绍了vue 解决setTimeOut和setInterval函数无效报错的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
setTimeout 描述 setTimeout(code,millisec) setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。 注:调用过程中,可以使用clearTimeout(id_of_settimeout)终止 参数 描述 code 必需,要调用的...
Javascript定时器 三 setTimeout func 0
今天在写一个js延时事件的时候发现在setTimeout这个方法里面使用jquery的$(this)竟然不起作用,各种测试,最后得出结论是setTimeout内不支持jquery的选择器。于是请教了一下QQ上做jquery开发的高手,马上就把这问题...
主要介绍了微信小程序—setTimeOut定时器的问题及解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
使用javascript方法settimeout()函数来定时跳转页面。
给c#添加SetTimeout和SetInterval函数.docx
使用SetInterval和设定延时函数setTimeout 很类似。setTimeout 运用在延迟一段时间,再进行某项操作。
看到一个问题,大概是这个样子得。 代码如下: name = ‘out of you’ foo = function(){ this.name = ‘xxoo’; } foo.prototype.say = function(){ ...这么解决呢。我测试了一下,用了call。 代码如下: setTimeout
Javascript定时器(二)——setTimeout与setInterval 在 http://www.cnblogs.com/strick/p/3983904.html 有说明
java后台定时器最简单用法实例,类似于js里的setTimeOut
使用setTimeout()方法模拟进度条