顏色漸變的動感導航菜單

2024-09-05 12:19:27

字體：大中小

來源：轉載

供稿：網友

很動感的響應鼠標變幻背景的導航菜單，具有顏色漸變的效果，像FLASH動畫一樣，非常好看，只是代碼有點偏多，想學習的朋友可以研究一下，再人優化一下代碼，應該效果不錯。

<!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><meta http-equiv="content-Type" content="text/html;charset=gb2312"><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><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><ul id="idMenu">  <li>網站首頁</li>  <li>最新更新</li>  <li>下載排行</li>  <li>軟件分類</li>  <li>廣告聯系</li></ul><script language="javascript">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>

上一篇：JS+CSS另類折疊菜單

下一篇：酷似FLASH的豎向菜單