jQuery实现的背景颜色渐变动画效果示例
程序员文章站
2022-06-28 08:35:41
本文实例讲述了jquery实现的背景颜色渐变动画效果。分享给大家供大家参考,具体如下:
完整实例代码如下:
本文实例讲述了jquery实现的背景颜色渐变动画效果。分享给大家供大家参考,具体如下:
完整实例代码如下:
<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>背景颜色渐变</title> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> </head> <body> <input id="button1" type="button" value="button" onclick="tggg()" /> <script> function tggg() { //$("#asd").css({ "background-color": "red" }).show().fadeout(500); fadecolor( { r: 0, g: 255, b: 0 }, //star color {r: 255, g: 255, b: 255 }, //end color function (color) { document.getelementbyid("asd").style.backgroundcolor = color; }, 1, 10); } //所有代码的执行时间只有24毫秒左右。 function fadecolor(from, to, callback, duration, totalframes) { //用一个函数来包裹settimeout,根据帧数来确定延时 function dotimeout(color, frame) { settimeout(function () { try { callback(color); } catch (e) { jslog.write(e); } }, (duration * 1000 / totalframes) * frame); //总持续秒数/每秒帧数*当前帧数=延时(秒),再乘以1000作为延时(毫秒) } // 整个渐变过程的持续时间,默认为1秒 var duration = duration || 1; // 总帧数,默认为持续秒数*15帧,也即每秒15帧 var totalframes = totalframes || duration * 15; var r, g, b; var frame = 1; //在第0帧设置起始颜色 dotimeout('rgb(' + from.r + ',' + from.g + ',' + from.b + ')', 0); //计算每次变化所需要改变的rgb值 while (frame < totalframes + 1) { r = math.ceil(from.r * ((totalframes - frame) / totalframes) + to.r * (frame / totalframes)); g = math.ceil(from.g * ((totalframes - frame) / totalframes) + to.g * (frame / totalframes)); b = math.ceil(from.b * ((totalframes - frame) / totalframes) + to.b * (frame / totalframes)); // 调用本frame的dotimeout dotimeout('rgb(' + r + ',' + g + ',' + b + ')', frame); frame++; } } </script> <div style="width: 600px; height: 200px; border: 1px solid red;" id="asd"> 欢迎各位光临--//www.jb51.net </div> </body> </html>
ps:这里再为大家推荐几款相关的颜色与特效工具供大家参考使用:
在线特效文字/彩色文字生成工具:
在线彩虹文字/颜色渐变文字生成工具:
在线发光字生成工具:
仿古书排版文字竖排转换工具:
更多关于jquery相关内容感兴趣的读者可查看本站专题:《jquery常用插件及用法总结》、《jquery中ajax用法总结》、《jquery表格(table)操作技巧汇总》、《jquery扩展技巧总结》、《jquery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jquery程序设计有所帮助。
推荐阅读
-
JS实现的简单折叠展开动画效果示例
-
使用jQuery实现的掷色子游戏动画效果
-
JS实现匀速与减速缓慢运动的动画效果封装示例
-
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
-
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
-
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
-
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
-
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
-
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
-
微信小程序基于canvas渐变实现的彩虹效果示例