JS实现的颜色实时渐变效果完整实例
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
本文实例讲述了JS实现的颜色实时渐变效果。分享给大家供大家参考,具体如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <html xmlns= "http://www.w3.org/1999/xhtml" > <head> <title>无标题页</title> </head> <body> <div id= "div1" style= "font-size:36px;" >我的闪烁文字 abc123</div> <span id= "span1" ></span> <script type= "text/javascript" > var begin = getRGB( '#33FFAA' ); var end = getRGB( '#FF0000' ); var curColor = getRGB( '#33FFAA' ); var bo = true ; var rate = getRate(begin, end); function blink() { window.setInterval( function (){ curColor.r = getCur(begin.r, end.r, curColor.r, bo, rate.r); curColor.g = getCur(begin.g, end.g, curColor.g, bo, rate.g); curColor.b = getCur(begin.b, end.b, curColor.b, bo, rate.b); document.getElementById( 'div1' ).style.color = getColor(curColor); document.getElementById( 'span1' ).innerHTML = getColor(curColor); if (curColor.r == begin.r && curColor.g == begin.g && curColor.b == begin.b) { bo = true ; } if (curColor.r == end.r && curColor.g == end.g && curColor.b == end.b) { bo = false ; } } , 100); } function getCur(beginValue, endValue, curValue, bo, rateValue) { if (beginValue == endValue) { return beginValue; } rateValue = beginValue < endValue ? rateValue : -rateValue; curValue += bo ? rateValue : -rateValue; if (curValue < Math.min(beginValue, endValue)) { curValue = Math.min(beginValue, endValue); } if (curValue > Math.max(beginValue, endValue)) { curValue = Math.max(beginValue, endValue); } return curValue; } function getRate(b, e) { var obj = new Object(); obj.r = Math.abs(b.r - e.r) / 5; obj.g = Math.abs(b.g - e.g) / 5; obj.b = Math.abs(b.b - e.b) / 5; return obj; } function getRGB(color) { var obj = new Object(); obj.r = parseInt(color.substr(1,2), 16); obj.g = parseInt(color.substr(3,2), 16); obj.b = parseInt(color.substr(5,2), 16); return obj; } function getColor(obj) { obj.r = Math.round(obj.r); obj.g = Math.round(obj.g); obj.b = Math.round(obj.b); var color = '#' ; color += (obj.r < 16 ? '0' : '' ) + obj.r.toString(16); color += (obj.g < 16 ? '0' : '' ) + obj.g.toString(16); color += (obj.b < 16 ? '0' : '' ) + obj.b.toString(16); return color; } blink(); </script> </body> </html> |
PS:这里再为大家推荐几款本站的相关在线工具:
在线RGB、HEX颜色代码生成器:
http://tools.jb51.net/color/rgb_color_generator
RGB颜色查询对照表_颜色代码表_颜色的英文名称大全:
http://tools.jb51.net/color/jPicker
在线网页调色板工具:
http://tools.jb51.net/color/color_picker
在线颜色选择器工具/RGB颜色查询对照表:
http://tools.jb51.net/color/colorpicker
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
相关文章
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
这篇文章主要介绍了项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)的相关资料,需要的朋友可以参考下2016-07-07解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
今天小编就为大家分享一篇解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09JS数组push、unshift、pop、shift方法的实现与使用方法示例
这篇文章主要介绍了JS数组push、unshift、pop、shift方法,结合实例形式分析了JS数组push、unshift、pop、shift方法针对数组添加、删除等相关操作技巧,需要的朋友可以参考下2020-04-04
最新评论