网站地图
首页
php教程
asp.net教程
手机开发
css教程
网页制作
办公数码
jsp教程
asp教程
ps教程
当前位置:
编程学习网
>>
php教程
>
php常用代码
> >
【javascript学习指南】JavaScript 颜色梯度和渐变效果
【javascript学习指南】JavaScript 颜色梯度和渐变效果
发布时间:2018-03-25
【www.gdgbn.com--php常用代码】
提示:您可以先修改部分代码再运行
JavaScript 颜色梯度和渐变效果
JavaScript 颜色梯度和渐变效果
<script type="text/javascript"> eval(function(p,a,c,k,e,r){e=function(c){return(c<62?"":e(parseInt(c/62)))+((c=c%62)>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
=M-1?M-1:p<0?1j.1U(p)+M:1j.1V(p);H(;p>-1;p--){9(C[i]===12)4 i}4-1}}};3 X(c,q){9(undefined===c.1a){H(5 f R c){9(w===q(c[f],f,c))19}}J{H(5 i=0,M=c.1a;i
//获取颜色梯度方法 var ColorGrads = (function(){ //获取颜色梯度数据 function GetStep(start, end, step) { var colors = [], start = GetColor(start), end = GetColor(end), stepR = (end[0] - start[0]) / step, stepG = (end[1] - start[1]) / step, stepB = (end[2] - start[2]) / step; //生成颜色集合 for(var i = 0, r = start[0], g = start[1], b = start[2]; i < step; i++){ colors[i] = [r, g, b]; r += stepR; g += stepG; b += stepB; } colors[i] = end; //修正颜色值 return $$A.map(colors, function(x){ return $$A.map(x, function(x){ return Math.min(Math.max(0, Math.floor(x)), 255); });}); } //获取颜色数据 var frag; function GetColor(color) { var ret = GetData(color); if (ret === undefined) { if (!frag) { frag = document.createElement("textarea"); frag.style.display = "none"; document.body.insertBefore(frag, document.body.childNodes[0]); }; try { frag.style.color = color; } catch(e) { return [0, 0, 0]; }//ie opera if (document.defaultView) { //opera #rrggbb ret = GetData(document.defaultView.getComputedStyle(frag, null).color); } else { color = frag.createTextRange().queryCommandValue("ForeColor"); ret = [ color & 0x0000ff, (color & 0x00ff00) >>> 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> 颜色梯度变化演示:
<script> ($$("idGradsSet").onclick = function(){ var colors = ColorGrads( ["#fff", $$("idGradsColor").value], 50 ); $$("idGrads").innerHTML = $$A.map(colors.concat().concat(colors.reverse()), function(x){ return ""; }).join(""); })() </script>
简单的颜色拾取器:
选择颜色: <script> $$("idPicker").innerHTML = "" + $$A.map(ColorGrads( ["red", "yellow", "blue"], 10 ), function(x){ return $$A.map(ColorGrads( ["#fff", "rgb(" + x.join(",") + ")" ,"#000"], 10 ), function(x){ return "
"; } ).join(""); }).join("") + ""; var oPickerShow = $$("idPickerShow"); $$A.forEach($$("idPicker").getElementsByTagName("li"), function(li){ li.onmouseover = function(){ this.className = "on"; oPickerShow.innerHTML = oPickerShow.style.backgroundColor = this.style.backgroundColor; } li.onmouseout = function(){ this.className = ""; } }) </script>
颜色渐变菜单: Cropper Tween Slider Resize Drag Tooltips <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" }); var 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>
点击随机颜色渐变:
点击随机换颜色
<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>
提示:您可以先修改部分代码再运行
本文来源:
http://www.gdgbn.com/jiaocheng/22212/
上一篇:
[asp教程生成静态html文件下载]asp教程-生成静态html文件实例代码
下一篇:
【美橙互联官网】仿美橙互联的导航效果
相关推荐
[asp教程生成静态html文件下载]asp教程-生成静态html文件实例代码
[asp.net]asp 文章分页类
javascript学习指南_javascript自动求各代码
[经典手机]经典asp分页程序代码
[javascript学习指南]javascript setInterval实例教程
[免费的]免费2g/10g/php/mysql/ftp/subdomain/domain
[json]js 控制完美select下拉选框代码
超简单夹娃娃机制作|超简单js可拖动层代码
【asp.net】asp 将中文自动转换成拼音
[自主可控]可控图片左右滚动代码
网友关注
互联网的最大特点|互联网40年最大变革 中文域名备受关注
js文字无缝滚动_js文字无间向上滚效果代码
asp.net|asp 生成验证码程序代码
javascript学习指南|JavaScript图片放大效果代码
[asp.net]asp 生成图片缩略图代码
网页背景图片_随便给网页背景换背景图片
json_js 调用多input文本输入框代码
【javascript学习指南】javascript 纯js图片广告轮换效果
seo优化_seo优化教程:如何优化内部链接?
[css div 居中]css+div 3行3列图片自动排列代码
热门标签
最新php常用代码
php常用代码
as3 api|as3 火燃烧效果实现代码
php常用代码
phpstudy|php continue和break流程控制语名用法
php常用代码
【sql语句查询】sql复合查询与null对查询结果影响分析
php常用代码
兼容firefox_兼容firefox和Opera,select中添加、修改、删除option元素
php常用代码
csrf-token_c 随机生成字符串或数组方法
php常用代码
css美化select_css美化select表单实现方法代码
php常用代码
【超简单的画】超简单php 大图生成缩略图实现代码
php常用代码
[asp.net core]asp.net ajax 检测用户名是否可用代码
php常用代码
phpstudy|php 获取目录下所有文件实现代码
php常用代码
asp.net core|asp.net ajax 检测用户名是否可用代码
php常用代码热门文章
php常
【美橙互联官网】仿美橙互联的导航效果
php常
css下拉菜单代码_css下拉菜单被flash挡住解决办法
php常
【php删除数组指定元素】php删除数组重复值代码
php常
【单选框和复选框的区别】点击单选框切换效果
php常
【javascript学习指南】javascript 漂亮实用的万年历代码
php常
【javascript学习指南】Javascript实现CSS代码高亮显示
php常
【php多文件上传】php文件上传代码
php常
php编辑上传修改文件大小_php编辑,上传,修改文件属性代码
php常
漂亮女局长|漂亮javascript+flash焦点广告切换图代码
php常
[漂亮女局长]漂亮javascript+flash焦点广告切换图代码
声明:本网站尊重并保护知识产权,根据《信息网络传播权保护条例》,如果我们转载的作品侵犯了您的权利,请在一个月内通知我们,我们会及时删除。
Copyright©2006-2019 编程学习网 www.gdgbn.com 版权所有