Jquery中文网 www.jquerycn.cn
jQuery 教程 | jQuery ui教程 |
Jquery中文网 >  脚本编程  >  javascript  >  正文 JavaScript 颜色梯度和渐变效果

JavaScript 颜色梯度和渐变效果

发布时间：2017-09-15   编辑：www.jquerycn.cn
jquery中文网为您提供JavaScript 颜色梯度和渐变效果等资源，欢迎您收藏本站，我们将为您提供最新的JavaScript 颜色梯度和渐变效果资源
提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" >JavaScript 颜色梯度和渐变效果 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JavaScript 颜色梯度和渐变效果</title> <script type="text/javascript"> eval(function(p,a,c,k,e,r){e=function(c){return(c<62?'':e(parseInt(c/62))) ((c=cb)>35?String.fromCharCode(c 29):c.toString(36))};if('0'.replace(0,e)==0){while(c--)r[e(c)]=k[c];k=[function(e){return r[e]||e}];e=function(){return'([3-59cf-hj-mo-rt-yCG-NP-RT-Z]|[12]w)'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('b' e(c) 'b','g'),k[c]);return p}('5 $$,$$B,$$A,$$F,$$D,$$E,$$S;(3(){5 O,B,A,F,D,E,S;O=3(id){4"1L"==1t id?P.getElementById(id):id};O.extend=3(G,10){H(5 Q R 10){G[Q]=10[Q]}4 G};O.deepextend=3(G,10){H(5 Q R 10){5 17=10[Q];9(G===17)continue;9(1t 17==="c"){G[Q]=I.callee(G[Q]||{},17)}J{G[Q]=17}}4 G};B=(3(K){5 b={11:/11/.x(K)&&!/1u/.x(K),1u:/1u/.x(K),1M:/webkit/.x(K)&&!/1v/.x(K),1N:/1N/.x(K),1v:/1v/.x(K)};5 1i="";H(5 i R b){9(b[i]){1i="1M"==i?"18":i;19}}b.18=1i&&1w("(?:" 1i ")[\/: ]([\d.] )").x(K)?1w.$1:"0";b.ie=b.11;b.1O=b.11&&1y(b.18)==6;b.ie7=b.11&&1y(b.18)==7;b.1P=b.11&&1y(b.18)==8;4 b})(1z.navigator.userAgent.toLowerCase());A=3(){5 l={isArray:3(1Q){4 Object.1R.toString.L(1Q)==="[c 1S]"},1A:3(C,12,p){9(C.1A){4 C.1A(12)}J{5 M=C.1a;p=1T(p)?0:(p<0)?1j.1U(p) M:1j.1V(p);H(;p> 8, (color & 0xff0000) >>> 16 ]; } } return ret; } //获取颜色数组 function GetData(color) { var re = RegExp; if (/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.test(color)) { //#rrggbb return $$A.map([ re.$1, re.$2, re.$3 ], function(x){ return parseInt(x, 16); }); } else if (/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i.test(color)) { //#rgb return $$A.map([ re.$1, re.$2, re.$3 ], function(x){ return parseInt(x x, 16); }); } else if (/^rgb((.*),(.*),(.*))$/i.test(color)) { //rgb(n,n,n) or rgb(n%,n%,n%) return $$A.map([ re.$1, re.$2, re.$3 ], function(x){ return x.indexOf("%") > 0 ? parseFloat(x, 10) * 2.55 : x | 0; }); } } return function(colors, step){ var ret = [], len = colors.length; if ( step === undefined ) { step = 20; } if ( len == 1 ) { ret = GetStep( colors[0], colors[0], step ); } else if ( len > 1 ) { for(var i = 0, n = len - 1; i < n; i ){ var steps = GetStep( colors[i], colors[i 1], step ); i < n - 1 && steps.pop(); ret = ret.concat(steps); } } return ret; } })(); //渐变对象 var ColorTrans = function(elem, options){ this._elem = $$(elem); this._timer = null;//定时器 this._index = 0;//索引 this._colors = [];//颜色集合 this._options = {};//参数对象 this._setOptions(options); this.speed = Math.abs(this.options.speed); this.style = this.options.style; this.reset({ from: this.options.from || $$D.getStyle(this._elem, this.style), to: this.options.to, step: Math.abs(this.options.step) }); this._set(); }; ColorTrans.prototype = { //设置默认属性 _setOptions: function(options) { this.options = {//默认值 from: "",//开始颜色(默认空值方便自动获取) to: "#000",//结束颜色 step: 20,//渐变级数 speed: 20,//渐变速度 style: "color"//设置属性（Scripting属性） }; $$.extend(this.options, options || {}); }, //重设颜色集合 reset: function(options) { //根据参数设置属性 this._options = options = $$.extend( this._options, options || {} ); //获取颜色集合 this._colors = ColorGrads( [ options.from, options.to ], options.step ); this._index = 0; }, //颜色渐入 transIn: function() { this.stop(); this._index ; this._set(); if(this._index < this._colors.length - 1){ this._timer = setTimeout($$F.bind( this.transIn, this ), this.speed); } }, //颜色渐出 transOut: function() { this.stop(); this._index--; this._set(); if(this._index > 0){ this._timer = setTimeout($$F.bind( this.transOut, this ), this.speed); } }, //颜色设置 _set: function() { var color = this._colors[Math.min(Math.max(0, this._index), this._colors.length - 1)]; this._elem.style[this.style] = "rgb(" color.join(",") ")"; }, //停止 stop: function() { clearTimeout(this._timer); } }; </script> </head> <body> <style type="text/css"> #idGrads div{height:1px;overflow:hidden;} </style> 颜色梯度变化演示：
<script> function GradsSet(color){ var colors = ColorGrads( ["#fff", color], 30 ); $$("idGrads").innerHTML = $$A.map(colors.concat().concat(colors.reverse()), function(x){ return "
"; }).join(""); } GradsSet("green"); </script>

<style type="text/css"> #idPicker ul{float:left;} #idPicker li{overflow:hidden;width:10px;height:10px;line-height:0;font-size:0;} #idPicker li.on{width:8px;height:8px; border:1px solid #000;} #idPicker ul, #idPicker li{list-style:none;margin:0;padding:0;} #idPicker:after{content:".";display:block;visibility:hidden;height:0;clear:both;} #idPicker{zoom:1;} </style> 简单的颜色拾取器(点击修改梯度演示颜色)：
<script> $$("idPicker").innerHTML = "<ul>" $$A.map(ColorGrads( [ "red", "orange", "yellow", "green", "cyan", "blue", "purple" ], 5 ), function(x){ return $$A.map(ColorGrads( [ "white", "rgb(" x.join(",") ")" ,"black" ], 5 ), function(x){ return "<li style='background:rgb(" x.join(",") ")'></li>"; }).join(""); }).join("</ul><ul>") "</ul>"; $$A.forEach($$("idPicker").getElementsByTagName("li"), function(li){ li.onmouseover = function(){ this.className = "on"; } li.onmouseout = function(){ this.className = ""; } li.onclick = function(){ GradsSet(this.style.backgroundColor); } }) </script>

<style type="text/css"> #idMenu{ background:#DBDBDB;text-align:center;line-height:25px; table-layout:fixed;} #idMenu td{ cursor:pointer; color:#666; background:#f6f6f6;} </style> 颜色渐变菜单： <table id="idMenu" width="600" border="0" cellspacing="5" cellpadding="0"> <tr> <td>Cropper</td> <td>Tween</td> <td>Slider</td> <td>Resize</td> <td>Drag</td> <td>Tooltips</td> </tr> </table> <script> $$A.forEach($$("idMenu").getElementsByTagName("td"), function(x, i){ var a = x.getElementsByTagName("a")[0], href = a.href, txt = a.innerHTML; x.onclick = function(){ location.href = href; } x.innerHTML = txt; var ct1 = new ColorTrans(x, { to: "white" }), ct2 = new ColorTrans(x, { to: "rgb(20,150,0)", style: "backgroundColor" }); x.onmouseover = function(){ ct1.transIn(); ct2.transIn(); } x.onmouseout = function(){ ct1.transOut(); ct2.transOut(); } }) </script>

<style type="text/css"> #idRandom{padding:10px; background:#CCC; color:#fff;} </style> 点击随机颜色渐变：
点击随机颜色渐变
<script> var ctRandom = new ColorTrans("idRandom", { style: "backgroundColor" }), ctRandom2 = new ColorTrans("idRandom"); $$("idRandom").onclick = function(){ var rgb = $$A.map([1,1,1], function(){ return Math.floor((Math.random() * 255)); } ), rgb2 = $$A.map(rgb, function(x){ return 255 - x; } ); ctRandom.reset({ from: this.style.backgroundColor, to: "rgb(" rgb.join(",") ")" }) ctRandom.transIn(); ctRandom2.reset({ from: this.style.color, to: "rgb(" rgb2.join(",") ")" }) ctRandom2.transIn(); } </script> </body> </html></textarea>
提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
canvas渐变色：canvas如何实现渐变色的效果？
JavaScript 颜色梯度和渐变效果
Illustrator如何调渐变颜色 调渐变颜色方法分享
html5和css3 动态气泡按钮的实现
CSS3 - 设置渐变颜色背景，线性/放射性/循环（附在线渐变生成工具）
使用HTML5 Canvas为图片填充颜色和纹理
photoshop利用渐变工具制作立体石膏球教程
Illustrator绘制Rokey PoPo幽默表情教程分享
Illustrator中调出渐变颜色具体方法分享
Photoshop快速制作一个有渐层颜色覆盖的背景教程

上一篇：JavaScript 图片滑动切换效果 下一篇：js 带缩略图纯javascript图片切换代码
[关闭]
最近更新
浏览排行

关于本站 | 网站地图 | 联系我们 | 免责声明 | 友情链接
CopyRight © 2010-2014 jQeury中文网 jquerycn.cn , All Rights Reserved.