您當前位置：首頁 > web前端 > jscript > JavaScript 打造導航菜單顏色漸變效果

JavaScript 打造導航菜單顏色漸變效果

來源：程序員人生發布時間：2014-03-13 10:40:45 閱讀次數：3461次

　　網(LieHuo.Net)教程 JavaScript 打造導航菜單顏色漸變效果，文字或背景顏色漸變，利用javascript+CSS實現的，代碼內有詳細注釋，本文由網轉載自cloudgamer的博客，請看下面的代碼及效果演示：

<!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><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>Javascript 顏色漸變效果</title><script type="text/javascript">var $ = function (id) { return "string" == typeof id ? document.getElementById(id) : id;};var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } }}Object.extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } return destination;}function addEventHandler(oTarget, sEventType, fnHandler) { if (oTarget.addEventListener) { oTarget.addEventListener(sEventType, fnHandler, false); } else if (oTarget.attachEvent) { oTarget.attachEvent("on" + sEventType, fnHandler); } else { oTarget["on" + sEventType] = fnHandler; }};var ColorFade = Class.create();ColorFade.prototype = { initialize: function(Obj, options) { this._obj = $(Obj); this._timer = null; this.SetOptions(options); this.Step = Math.abs(this.options.Step); this.Speed = Math.abs(this.options.Speed); this.StartColor = this._color = this.GetColors(this.options.StartColor); this.EndColor = this.GetColors(this.options.EndColor); this._arrStep = [this.GetStep(this.StartColor[0], this.EndColor[0]), this.GetStep(this.StartColor[1], this.EndColor[1]), this.GetStep(this.StartColor[2], this.EndColor[2])]; this._set = !this.options.Background ? function(color){ this._obj.style.color = color; } : function(color){ this._obj.style.backgroundColor = color; }; this._set(this.options.StartColor); var oThis = this; addEventHandler(this._obj, "mouseover", function(){ oThis.Fade(oThis.EndColor); }); addEventHandler(this._obj, "mouseout", function(){ oThis.Fade(oThis.StartColor); }); }, //設置默認屬性 SetOptions: function(options) { this.options = {//默認值 StartColor: "#000",//定義原來的顏色 EndColor: "#DDC",//定義要漸變的顏色 Background: false,//是否背景變色(默認文字) Step: 20,//漸變級數 Speed: 10//漸變速度 }; Object.extend(this.options, options || {}); }, //獲取顏色數據 GetColors: function(sColor) { sColor = sColor.replace("#", ""); var r, g, b; if (sColor.length > 3) { r = Mid(sColor, 0, 2); g = Mid(sColor, 2, 2); b = Mid(sColor, 4, 2); } else { r = Mid(sColor, 0, 1); g = Mid(sColor, 1, 1); b = Mid(sColor, 2, 1); r += r; g += g; b += b; } return [parseInt(r, 16), parseInt(g, 16), parseInt(b, 16)]; }, //獲取漸變顏色數據 GetColor: function(c, ec, iStep) { if (c == ec) { return c; } if (c < ec) { c += iStep; return (c > ec ? ec : c); } else { c -= iStep; return (c < ec ? ec : c); } }, //獲取漸變級數 GetStep: function(start, end) { var iStep = Math.abs((end - start) / this.Step); if(iStep > 0 && iStep < 1) iStep = 1; return parseInt(iStep); }, //顏色漸變 Fade: function(rColor) { clearTimeout(this._timer); var er = rColor[0], eg = rColor[1], eb = rColor[2], r = this.GetColor(this._color[0], er, this._arrStep[0]), g = this.GetColor(this._color[1], eg, this._arrStep[1]), b = this.GetColor(this._color[2], eb, this._arrStep[2]); this._set("#" + Hex(r) + Hex(g) + Hex(b)); this._color = [r, g, b]; if(r != er || g != eg || b != eb){ var oThis = this; this._timer = setTimeout(function(){ oThis.Fade(rColor); }, this.Speed); } }};//返回16進制數function Hex(i) { if (i < 0) return "00"; else if (i > 255) return "ff"; else { var str = "0" + i.toString(16); return str.substring(str.length - 2); }}//仿asp的mid 截字function Mid(string, start, length) { if (length) return string.substring(start, start + length); else return string.substring(start);}</script></head><body><div id="idDiv" style="padding:10px;">顏色漸變效果</div><style type="text/css">#idMenu{ clear:both; height:35px; background:#DBDBDB; width:560px;}#idMenu li{ float:left; line-height:25px; width:100px; text-align:center; margin:5px; cursor:pointer;}</style><ul id="idMenu"><li>菜單</li><li>菜單</li><li>菜單</li><li>菜單</li><li>菜單</li></ul><script>new ColorFade("idDiv", { StartColor: "#000", EndColor: "#fff" });new ColorFade("idDiv", { StartColor: "#fff", EndColor: "#000", Background: true });var objs = document.getElementById("idMenu").getElementsByTagName("li");for(var i = 0, len = objs.length; i < len; i++){ new ColorFade(objs[i], { StartColor: "#333", EndColor: "#fff", Speed: 20 }); new ColorFade(objs[i], { StartColor: "#f6f6f6", EndColor: "#3ea936", Background: true, Speed: 20 });}</script></body></html><br /><center>如不能顯示效果，請按Ctrl+F5刷新本頁，更多網頁代碼：<a href='http://www.vxbq.cn/' title="liehuo.net" target='_blank'>http://www.vxbq.cn/</a></center>
提示：可修改后代碼再運行!

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 CSS3 靈活的盒子模型(Flexible Box Module)

下一篇 安全技巧：Apache服務器設置安全指南

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

JavaScript 打造導航菜單顏色漸變效果