JavaScript 颜色梯度和渐变效果
作者:cloudgamer 来源:cloudgamer博客 发布时间:2009-03-18 11:16:00
很久没写blog,太忙了。没什么时间写复杂的东西,重新把颜色渐变效果写一遍。
关于颜色的效果一般就两个,颜色梯度变化和样式的颜色渐变,前者在ie中一般用滤镜实现。
实例效果
预览效果1:
这是一个颜色梯度变化演示:
在线演示页面:Color.htm (下载请另存为)
程序说明
【ColorGrads颜色梯度】
程序ColorGrads的作用是通过StartColor和EndColor生成颜色梯度集合。
颜色都可以用红(r)、绿(g)、蓝(b)三个颜色来表示。
程序中先通过GetColor把一般的颜色表示形式转化成一个用红(r)、绿(g)、蓝(b)三个颜色值作元素的集合。
那就首先要知道有什么颜色表示形式,从w3c的Colors部分可以知道有以下形式:
关键词模式:
em { color: red }
RGB颜色模式:
em { color: #f00 }
em { color: #ff0000 }
em { color: rgb(255,0,0) }
em { color: rgb(100%, 0%, 0%) }
以上都是表示同一种颜色(红色)。
获取颜色属性的形式在ie和ff并不同,ff统一返回RGB颜色模式的第三种形式,ie则按照设置时的形式返回。
先说说RGB颜色模式,前两种比较常用应该都明白他们的区别吧,它用的是16进制表示形式,而我们想要10进制的。
把一个16进制表示的字符转成10进制数字,一般用parseInt,在substr截取字符之后就可以用parseInt转换。
对于#ff0000这个形式可以这样转换:
return Map([color.substr(1, 2), color.substr(3, 2), color.substr(5, 2)],
function(x){ return parseInt(x, 16); }
)
parseInt的第二个参数就是第一个参数的进制值。
对于#f00形式,跟上一个差不多,只是转换之前要先换成完整表示形式:
return Map([color.substr(1, 1), color.substr(2, 1), color.substr(3, 1)],
function(x){ return parseInt(x + x, 16); }
)
后面两种可能用的就比较少了,一个用10进制的rgb颜色值表示,另一个用百分比来表示。
ff严格按照那样的格式来表示,而ie就“放松”很多,例如:
ie可以允许数字百分比混用,ff不可以;
ff必须有逗号分隔,ie可以只用空格分隔;
当然我们使用时最好是按照w3c的标准来设置了。
ps:那个DHTML 手册上写的 EM { color: rgb 1.0 0.0 0.0 } 根本不能用的,不要被误导了。
对这个形式,程序用正则取得数值,如果有%就根据百分比计算出对应数值:
return Map(color.match(/\d+(\.\d+)?\%?/g),
function(x){ return parseInt(x.indexOf("%") > 0 ? parseFloat(x, 10) * 2.55 : x, 10); }
)
而关键词大家都很熟悉,要转化却很麻烦,因为没有一定规律只能一个一个对应:
var mapping = {"red":"#FF0000"};//略
color = mapping[color.toLowerCase()];
if(color){
return Map([color.substr(1, 2), color.substr(3, 2), color.substr(5, 2)],
function(x){ return parseInt(x, 16); }
)
}
在Create创建颜色集合程序中获得开始颜色和结束颜色的数据后,再根据Step(多少步)就可以获得步长了:
startColor = this.GetColor(this.StartColor),
endColor = this.GetColor(this.EndColor),
stepR = (endColor[0] - startColor[0]) / this.Step,
stepG = (endColor[1] - startColor[1]) / this.Step,
stepB = (endColor[2] - startColor[2]) / this.Step;
再根据步长生成集合:
for(var i = 0, n = this.Step, r = startColor[0], g = startColor[1], b = startColor[2]; i < n; i++){
colors.push([r, g, b]); r += stepR; g += stepG; b += stepB;
}
colors.push(endColor);
正确的颜色值是在0到255之间的,而且是不带小数的,所以最好修正一下:
return Map(colors, function(x){ return Map(x, function(x){
return Math.min(Math.max(0, Math.floor(x)), 255);
});});
猜你喜欢
- 一、从 4.0 到 4.1 的主要变化 如果在4.1.0到4.1.3版本的MySQL中创建了包含 TIMESTAMP 字段的 InnoDB表
- 本文实例讲述了thinkPHP框架通过Redis实现增删改查操作的方法。分享给大家供大家参考,具体如下:一、概述Redis是一个NoSQL数
- 引言Supabase是一个自称的 "开源Firebase替代品"。我对与Supbase合作已经有一段时间了,我想我将尝试
- acronym从字义上理解,是取首字母的缩写词,abbr是缩写,在应用过程中,两个标签看起来差不多,但个人觉得还是有区别的。看下面的例子:&
- axios的二次封装视频讲解npm i axios //下载axios首先创建两个文件夹在src目录下;api和c
- 本文重在实践和测试,如果你还不了解Data URI,推荐先阅读秦歌的Data URI 和 MHTML。旺旺点灯(JS)实践经过:因为要对SR
- 在MySQL中可以使用IF()、IFNULL()、NULLIF()、ISNULL()函数进行流程的控制。1、IF()函数的使用IF(expr
- 由于是上线的项目且已经按照数据逻辑去渲染了能看懂的看逻辑吧。有点多效果如图<template> <div class=&q
- 一、背景及研究现状在我国互联网的发展过程中,PC互联网已日趋饱和,移动互联网却呈现井喷式发展。数据显示,截止2013年底,中国手机网民超过5
- 一、正则表达式的作用提示:正则表达式是一段特殊的字符串,它表示的是一段有规律的信息。如果我们想从一段文字中提取想要的内容,就可以通过正则表达
- 最近由于公司有一个向谷歌网站上传文件的需求,需要进行web的自动化测试,选择了selenium这个自动化测试框架,以前没有接触过这门技术,所
- 设置cookie每个cookie都是一个名/值对,可以把下面这样一个字符串赋值给document.cookie:document.cooki
- 这个问题已经不是什么新鲜问题了,网上也有大把的教程,但大多数是授人以鱼,而不授人以渔,经过辛苦的资料收集,思考,调试,整理,我基本上已经把这
- python一直被病垢运行速度太慢,但是实际上python的执行效率并不慢,慢的是python用的解释器Cpython运行效率太差。“一行代
- 前面的话在介绍Date对象之前,首先要先了解关于日期和时间的一些知识。比如,闰年、UTC等等。深入了解这些,有助于更好地理解javascri
- 最近在制作一个自己的个人博客的时候遇到这么一个问题, 在CSS中使用了相对路径来充当背景图片, 如下所示:然后将整个工程使用webpack打
- Python项目文件中安装 setup.py安装 setup.py 的过程与安装其他的 Python 包的过程类似。首先,你需要下载或者使用
- 摘 要: 恢复丢失的数据库文件在很大程度上取决于所采用的备份策略。本文从恢复的灵活性出发,对Oracle8数据库的备份及恢复策略进行了探讨,
- 在现代LOGO设计当中,叶子的形状被视做好的创意。或者说,是一种变革的想法。在网页中他们大多被用于轻量级的解决方案、干净的不抽像的设计。在实
- JS继承 JavaScript中没有类的概念,与类相关的继承的概念更是无从谈起,但是我们可以通过特殊的语法来 模拟面向对象语言中的继承。 在