漂亮的触发行变色代码

<!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">
<!-- DW6 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2313" />
<title>www.qpsh.com</title>
<style type="text/css">
/* <![CDATA[ */
 div{margin:1px; vertical-align:middle;}
 
 .FadeId18Class
 {
  color:white;
 }
 .FadeId18OverClass
 {
  color:#D369A4;
 }
/* ]]> */
</style>

</head>
<body>

<table  border="0" align="center" cellpadding="4" cellspacing="4" id="Container">
 <tr align="center" valign="middle">
  <td valign="middle">
   <div id="FadeId1" style="width:100px; height:100px;">www.qpsh.com
   </div>
  </td>
  <td>
   <div id="FadeId2" style="width:100px; height:100px;">www.qpsh.com
   </div>
  </td>
  <td>
   <div id="FadeId3" style="width:100px; height:100px;">www.qpsh.com
   </div>
  </td>
  <td>
   <div id="FadeId4" style="width:100px; height:100px;">www.qpsh.com
   </div>
  </td>
  <td>
   <div id="FadeId5" style="width:100px; height:100px;">www.qpsh.com
   </div>
  </td>
 </tr>
 <tr align="center" valign="middle">
  <td>
   <div id="FadeId6" style="width:100px; height:100px;">www.qpsh.com
   </div>
  </td>
  <td>
   <div id="FadeId7" style="width:100px; height:100px;">www.qpsh.com
   </div>
  </td>
  <td>
   <div id="FadeId8" style="width:100px; height:100px;">www.qpsh.com
   </div>
  </td>
  <td>
   <div id="FadeId9" style="width:100px; height:100px;">www.qpsh.com
   </div>
  </td>
  <td>
   <div id="FadeId10" style="width:100px; height:100px;">www.qpsh.com
   </div>
  </td>
 </tr>
 <tr align="center" valign="middle">
  <td>
   <div id="FadeId11" style="width:100px; height:100px;">www.qpsh.com
   </div>
  </td>
  <td>
   <div id="FadeId12" style="width:100px; height:100px;">
 <a target="_blank" href="http://tmsc0216.diandian.com/</a>
   </div>
  </td>
  <td>
   <div id="FadeId13" style="width:100px; height:100px;">www.qpsh.com
   </div>
  </td>
  <td>
   <div id="FadeId14" style="width:100px; height:100px;">www.qpsh.com
   </div>
  </td>
  <td>
   <div id="FadeId15" style="width:100px; height:100px;">www.qpsh.com
   </div>
  </td>
 </tr>
 </table>

<script type="text/javascript">

function Faded()
{
 var Au = {};

 
 var This = this;
 
 var Param = {};
 var PVar = {};
 this.Get = {};
 this.Get.Au = fGetAu;
 this.Set = {};
 this.Debug = false;
 
 this.TagSpliter = "->";
 
 this.Element = {};
 this.Element.Set = [];
 this.Element.Add =
  function(sId, sOriginColor, sOverColor, sOutColor, iTime, iIntervalMs, bCompColor, sClassName, sOverClassName)
  {
   __Faded_AddElement
   (sId, sOriginColor, sOverColor, sOutColor, iTime, iIntervalMs, bCompColor, sClassName, sOverClassName, This)
  };
 
 this.Element.BatchAdd =
  function(Main, sChildTag, ArOriColor, ArOverColor, ArOutColor, iTime, iIntervalMs, bCompColor, sClassName, sOverClassName)
  {
   Main = fSetObject(Main, "Faded Batch Main is null!");
   sChildTag = sChildTag.toUpperCase();
  
   var EleAr = [];  
   var TagAr = sChildTag.split(This.TagSpliter);
  
   EleAr = fGetDeepTag(Main, TagAr);
     
   if(ArOriColor.length===1)
   {
    ArOriColor.push(ArOriColor[0]);
   }
  
   if(ArOverColor.length===1)
   {
    ArOverColor.push(ArOverColor[0]);
   }
  
   if(typeof(ArOutColor)=="boolean"||ArOutColor.constructor==Boolean)
   {
    ArOutColor = [ArOutColor];
   }
  
   if(ArOutColor.length===1)
   {
    ArOutColor.push(ArOutColor[0]);
   }
  
   for(var i=0, j=EleAr.length; i<j; i++)
   {
    if(i%2===0)
    {
     Fade.Element.Add
     (
      EleAr[i]
      , ArOriColor[0]
      , ArOverColor[0]
      , ArOutColor[0]
      ,iTime
      , iIntervalMs
      , bCompColor
      , sClassName
      , sOverClassName
     );
    }
    else
    {
     Fade.Element.Add
     (
      EleAr[i]
      , ArOriColor[1]
      , ArOverColor[1]
      , ArOutColor[1]
      ,iTime
      , iIntervalMs
      , bCompColor
      , sClassName
      , sOverClassName
     );
    }
   }
  }
 
 this.Go = fGo;
 function fGo(fIniter)
 {
  if(fIsFunc(fIniter)) fIniter(Param);
 
  for(var i = 0, j=This.Element.Set.length; i<j; i++)
  {
   var TempObj = This.Element.Set[i];
  
   TempObj.style.backgroundColor = TempObj["Extend"]["OriginalColor"];
   TempObj["Interval"] = {};
      
   if(TempObj["Extend"]["CompColor"])
   {
    TempObj.style.color = fGetCompColor(TempObj["Extend"]["OriginalColor"]);
   }
  
   if(TempObj["Extend"]["ClassName"]!="")
   {
    TempObj.className = TempObj["Extend"]["ClassName"];
   }
  
   TempObj.onmouseover = fOnMouseOver;

   TempObj.onmouseout = fOnMouseOut;

   }
 }
 
 function fOnMouseOut()
 {
  try
  {
   clearInterval(this["Interval"]["Over"]["Go"]);
  }
  catch(e)
  {
  }
 
  this["Interval"]["Out"] ={}
  this["Interval"]["Out"]["Count"] = 0;
  
  if(this["Extend"]["ClassName"]!="")
  {
   this.className = this["Extend"]["ClassName"];
  }
 
  var BgColor = this.style.backgroundColor==""?"#ffffff":this.style.backgroundColor;
  if(/rgb\(/i.test(BgColor))
  {
   BgColor = fRgbToHex(BgColor);
  }
 
  this["Interval"]["Out"]["FadeArray"] =
   __Faded_Fade
   (
    BgColor,
    this["Extend"]["OutColor"],
    this["Extend"]["Time"],
    false,
    true
   );
  
  var me = this;
 
  this["Interval"]["Out"]["Go"] =
   setInterval
   (
    function()
    {
     if(me["Interval"]["Out"]["Count"]>=me["Interval"]["Out"]["FadeArray"].length)
     {
      clearInterval(me["Interval"]["Out"]["Go"]);
      me["Interval"]["Out"]["Count"] = null;
      return;
     }
    
     var sBgColor = me["Interval"]["Out"]["FadeArray"][me["Interval"]["Out"]["Count"]];
    
     me.style.backgroundColor = sBgColor;
    
     if(me["Extend"]["CompColor"])
     {
      me.style.color = fGetCompColor(sBgColor);
     }
     
     if(This.Debug)
     defaultStatus = me["Interval"]["Out"]["Count"];
    
     me["Interval"]["Out"]["Count"]++;
    }
    ,
    me["Extend"]["IntervalMs"]
   ) // www.qpsh.com
 }
 
 function fOnMouseOver()
 {
  try
  {
   clearInterval(this["Interval"]["Out"]["Go"]);
  }
  catch(e)
  {
  }
 
  this["Interval"]["Over"] ={}
  this["Interval"]["Over"]["Count"] = 0;
  
  if(this["Extend"]["OverClassName"]!="")
  {
   this.className = this["Extend"]["OverClassName"];
  }
  
  var BgColor = this.style.backgroundColor==""?"#ffffff":this.style.backgroundColor;
  if(/rgb\(/i.test(BgColor))
  {
   BgColor = fRgbToHex(BgColor);
  }
  this["Interval"]["Over"]["FadeArray"] =
   __Faded_Fade
   (
    BgColor,
    this["Extend"]["MoveColor"],
    this["Extend"]["Time"],
    false,
    true
   );
  
  var me = this;
 
  this["Interval"]["Over"]["Go"] =
   setInterval
   (
    function()
    {

     if(me["Interval"]["Over"]["Count"]>=me["Interval"]["Over"]["FadeArray"].length)
     {
      clearInterval(me["Interval"]["Over"]["Go"]);
      me["Interval"]["Over"]["Count"] = null;
      return;
     }
    
     var sBgColor = me["Interval"]["Over"]["FadeArray"][me["Interval"]["Over"]["Count"]];
    
     me.style.backgroundColor = sBgColor;
    
     if(me["Extend"]["CompColor"])
     {
      me.style.color = fGetCompColor(sBgColor);
     }
     
     if(This.Debug)
     defaultStatus = me["Interval"]["Over"]["Count"];
    
     me["Interval"]["Over"]["Count"]++;
    }
    ,
    me["Extend"]["IntervalMs"]
   )
 }
 
 function fGetAu(){ return Au; }
}
function __Faded_AddElement
(sId, sOriginColor, sOverColor, sOutColor, iTime, iIntervalMs, bCompColor, sClassName, sOverClassName, oFaded)
{
 var Obj = fSetObject(sId);
 
 if(!bCompColor) bCompColor = false;
 else bCompColor = true;
  
 if(!sClassName) sClassName = "";
 if(!sOverClassName) sOverClassName = "";

 if(!sOriginColor)
 {
  sOriginColor = fGetStyle(Obj, "backgroundColor");
  if(sOriginColor=="transparent") sOriginColor = "#FFFFFF";
 }
 
 if(!sOverColor) sOverColor = "#cccccc";
 if(!sOutColor) sOutColor = sOriginColor;
 if(!iTime) iTime = 10;
 if(!iIntervalMs) iIntervalMs = 50;
 
 Obj["Extend"] = {};
 Obj["Extend"]["OriginalColor"] = sOriginColor;
 Obj["Extend"]["MoveColor"] = sOverColor;
 Obj["Extend"]["OutColor"] = sOutColor;
 Obj["Extend"]["Time"] = iTime;
 Obj["Extend"]["IntervalMs"] = iIntervalMs;
 Obj["Extend"]["CompColor"] = bCompColor;
 
 Obj["Extend"]["ClassName"] = sClassName;
 Obj["Extend"]["OverClassName"] = sOverClassName;
 
 var iPos = oFaded.Element.Set.length;
 oFaded.Element.Set[iPos] = Obj;
 
}

function fGetDeepTag(Ele, TagAr, ResultAr)
{
 if(!ResultAr) ResultAr = [];
 
 var TagArLen = TagAr.length;  
 if(TagArLen===0) return ResultAr;
 if(TagArLen===1)
 {
  for( var i=0, j=Ele.childNodes.length; i<j; i++)
  {
   var TempChild = Ele.childNodes[i];
  
   if(TempChild.nodeType===1)
   {
    if(TempChild.tagName==TagAr[0])
    {
     ResultAr.push(TempChild);
    }
   }
  }
 
  return ResultAr;
 }

 for(var i=0, j=Ele.childNodes.length; i<j; i++)
 {
  var TempChild = Ele.childNodes[i];
 
  if(TempChild.nodeType===1)
  {
   if(TempChild.tagName==TagAr[0])
   {
    var TempAr = TagAr.slice();
    TempAr.shift();
    arguments.callee(TempChild, TempAr, ResultAr);
   }
  }
 }
 
 return ResultAr;
}

function __Faded_Fade(sOriginalColor, sFinalColor, iTime, sOpt, bPadSharp)
{
 if(!sOriginalColor||sOriginalColor=="") fFatalError("原色不能为空!");
 if(!sFinalColor||sFinalColor=="") fFatalError("最终色不能为空!");
 
 if(!iTime||typeof(iTime)!="number") iTime = 5;
 if(!sOpt) sOpt = "auto";
 var sSharp = "";
 if(bPadSharp) sSharp = "#";
 
 var Debug = false;
 var oAr = fSplitColor(sOriginalColor);
 var oArInt = fHexArrayToInt(oAr);
 
 var fAr = fSplitColor(sFinalColor);
 var fArInt = fHexArrayToInt(fAr);
 
 var ReturnAr = [];
 
 switch(sOpt)
 {
  default:
   var SubtractAr = [];
   var SpanAr = [];
   var ReturnArInt = [];
  
   for(var i=0, j=oArInt.length; i<j; i++)
   {
    SubtractAr[i] = fArInt[i] - oArInt[i];
    SpanAr[i] = SubtractAr[i]/iTime;
   }
  
   for(var i=0, j=iTime; i<j; i++)
   {
    ReturnArInt[i] = [];
    ReturnArInt[i][0] = parseInt(oArInt[0]+(SpanAr[0]*(i+1)));
    ReturnArInt[i][1] = parseInt(oArInt[1]+(SpanAr[1]*(i+1)));
    ReturnArInt[i][2] = parseInt(oArInt[2]+(SpanAr[2]*(i+1)));
   
    ReturnAr[i] =  [
     ""
     ,sSharp
     ,fPadStr(ReturnArInt[i][0].toString(16)).toUpperCase()
     ,fPadStr(ReturnArInt[i][1].toString(16)).toUpperCase()
     ,fPadStr(ReturnArInt[i][2].toString(16)).toUpperCase()
     ].join('');
   }
   sFinalColor= sFinalColor.replace(/^\#/, "");
   if(bPadSharp) sFinalColor = "#"+sFinalColor;
   ReturnAr[ReturnAr.length-1] = sFinalColor.toUpperCase();
   break;
 }
 
 if(Debug)
 {
  alert
  (
   " oAr: "+oAr
   +"\n oArInt: "+oArInt
   +"\n fAr: "+fAr
   +"\n fArInt: "+fArInt
   +"\n typeof(sOpt): "+typeof(sOpt)
   +"\n SubtractAr: "+SubtractAr
   +"\n SpanAr: "+SpanAr
   +"\n ReturnArInt: "+ReturnArInt
   +"\n ReturnAr: "+ReturnAr
  );
 }
 
 return ReturnAr.slice();
}

function fHexArrayToInt(ar)
{
 var TempAr = [];
 for(var i=0, j=ar.length; i<j; i++)
 {
  TempAr[i] = parseInt(ar[i], 16);
 }
 return TempAr.slice();
}

function fSplitColor(sColor)
{
 if(!sColor||sColor=="")
 {
  alert("颜色不能为空!");
  return;
 }
 var Debug = true;
 sColor = sColor.replace(/^\#/, "");
 if(sColor.length == 3)
 {
  var sTemp = "";
  for(var i = 0, j=sColor.length; i<j; i++)
  {
   sTemp+= ""+sColor.charAt(i)+sColor.charAt(i);
  }
  sColor = sTemp;
 }
 
 if(sColor.length!=6)
 {
  alert("无法识别的颜色代码!")
  return;
 }
 
 var arHex = [];
 arHex[0] = ""+sColor.charAt(0)+sColor.charAt(1);
 arHex[1] = ""+sColor.charAt(2)+sColor.charAt(3);
 arHex[2] = ""+sColor.charAt(4)+sColor.charAt(5);
 
 return arHex.slice();
}

function fGetCompColor(sInput, sOpt, bNoSharp, bDebug)
{
 if(!sInput) sInput = "#000000";
 if(!sOpt) sOpt = 'hex';
 sOpt = sOpt.toLowerCase();
 
 var arCell = [];
 var arHex = [];
 var arHexFinal = [];
 var arInt = [];
 var arIntFinal = [];
 
 var Debug = bDebug;
 
 if(Debug)
 {
  alert
  (
   "sInput: "+sInput
   +" sOpt: "+sOpt
  );
 }
 
 sInput = sInput.replace(/^\#/, "");
 
 switch(sOpt)
 {
  case "rgb":
   break;
  
  default:
  
   if(sInput.length==3)
   {
    var arTemp = fStringToArray(sInput);
    sInput = ""+arTemp[0]+arTemp[0]+arTemp[1]+arTemp[1]+arTemp[2]+arTemp[2];
   }
  
   if(sInput.length==6)
   {
    arCell = fStringToArray(sInput);    
   
    arHex[0] = "0x"+arCell[0]+arCell[1];
    arHex[1] = "0x"+arCell[2]+arCell[3];
    arHex[2] = "0x"+arCell[4]+arCell[5];
   
    arInt[0] = parseInt(arHex[0], 16);
    arInt[1] = parseInt(arHex[1], 16);
    arInt[2] = parseInt(arHex[2], 16);
   
    arIntFinal[0] = Math.abs(255-arInt[0]);
    arIntFinal[1] = Math.abs(255-arInt[1]);
    arIntFinal[2] = Math.abs(255-arInt[2]);
   
    arHexFinal[0] = fPadStr(arIntFinal[0].toString(16)).toUpperCase();
    arHexFinal[1] = fPadStr(arIntFinal[1].toString(16)).toUpperCase();
    arHexFinal[2] = fPadStr(arIntFinal[2].toString(16)).toUpperCase();
   
    if(Debug)
    {
     alert("arCell: "+arCell);
     alert("arHex: "+arHex);
     alert("arInt: "+arInt);
     alert("arIntFinal: "+arIntFinal);
     alert("arHexFinal: "+arHexFinal);
    }
   
    if(bNoSharp) return arHexFinal.join("");
   
    return "#"+arHexFinal.join("");
   }
   else
   {
    alert("无法识别的十六进制颜色代码!");
   }
   break;  
 }
 return "000000";
}

function fStringToArray(sInput)
{
 return sInput.split("");
}
 
function fGetStyle(Ele, sStyle)
{
 var Brs = fCkBrs();
 if(Brs===3)
 {
  var sReturn = getComputedStyle(Ele, null)[sStyle];
  if(/\brgb\b/i.test(sReturn))
  {
   return fRgbToHex(sReturn);
  }
  return sReturn;
 }
 else return Ele.currentStyle[sStyle];
 
}
 
function fCkBrs()
{
 switch (navigator.appName)
 {
  case 'Opera': return 2;
  case 'Netscape': return 3;
  default: return 1;
 }
}

function fRgbToHex(sRgb, bNoSharp, bDebug)
{
 if(!sRgb||sRgb=="") throw new Error("RGB颜色代码不正确!");
 var Debug = bDebug;
 
 var sSharp = "";
 if(!bNoSharp) sSharp = "#";
 if(/rgb\(/i.test(sRgb))
 {
  sRgb = sRgb.replace(/^[\s\S]*?rgb\((.*?)\)[\s\S]*/gi, "$1").replace(/\s+/g, "");
 }
 var RgbAr = sRgb.split(",");
 var sReturn =
  [
  sSharp
  ,(fPadStr((RgbAr[0]-0).toString(16)).toUpperCase())
  ,(fPadStr((RgbAr[1]-0).toString(16)).toUpperCase())
  ,(fPadStr((RgbAr[2]-0).toString(16)).toUpperCase())
  ].join("");
 
 if(Debug)alert(sReturn);
 
 return sReturn;
 
}
 
function fPadStr(sSrc, sPad, nLen)
{
 if(!sSrc)return false;
 if(!sPad)sPad='0';
 if(!nLen)nLen=2;
 sSrc+='';
 if(sSrc.length>=nLen)return sSrc;
 sPad=new Array(nLen+1).join(sPad);
 var re=new RegExp('.*(.{'+(nLen)+'})$');
 return (sPad+sSrc).replace(re,'$1');
}

function fIsFunc(Func)
{
 if(Func) if(Func.constructor==Function) return true;
 return false;
}

function fIsEmpty(Source)
{
 var bStr = false;
 if(Source.constructor==String) Source = [Source], bStr = true;
   
 return /^\s*$/.test(Source[0]);
}

function fTrim(Source)
{
 var bStr = false;
 if(Source.constructor==String) Source = [Source], bStr = true;
 Source[0] = Source[0].replace(/^\s+|\s+$/g,'');
 if(bStr) return Source[0];
}

function fSetObject(Obj, sMsg, Dcu)
{
 if(!sMsg) sMsg = "无法获得对象!";
 if(!Dcu) Dcu = document;
 
 switch(Obj.constructor)
 {
  case String:
   Obj = Dcu.getElementById(Obj);
   break;
  
  case Array:
   Obj = Obj[0];
   break;
 }
 
 if(Obj==null) throw new Error(sMsg);
 
 return Obj;
}

function fFatalError(sMsg)
{
 if(!sMsg) sMsg = "an fatal error occurring, program abort now!"
 throw new Error(sMsg);
}
function fCkBrs()
{
 switch (navigator.appName)
 {
  case 'Opera': return 2;
  case 'Netscape': return 3;
  default: return 1;
 }
}

function __Id(sTag, oDocument)
{
 if(!oDocument) oDocument = document;
 return oDocument.getElementById(sTag);
}

function __E(sTag, oDocument)
{
 if(!oDocument) oDocument = document;
 return oDocument.createElement(sTag);
}

function __T(sText, oDocument)
{
 if(!oDocument) oDocument = document;
 return oDocument.createTextNode(sText);
}

function fFormat(sStr)
{
 var Len = arguments.length;
 
 switch(Len)
 {
  case 0: return "";
  case 1: return sStr;
 }
 
 var Re = null;
 for(var i=1, j=0; i<Len; i++, j++)
 {
  Re = new RegExp(["\\{", j, "\\}"].join(""), "g");
  sStr = sStr.replace(Re, arguments[i]);
 }
 Re = null;
 
 return sStr;
}
//<![CDATA[
 var Time = 20;
 var Interval = 5;
 var Container = document.getElementById("Container");
 
 var StartDate = new Date();
 
 var Fade = new Faded();
  Fade.Debug = false;
 
  Fade.Element.BatchAdd
  (
   "Container"
   , "tbody->tr"
   , ["#F5F5F5", "#ececec"]
   , ["#cccccc", "#cccccc"]
   , false
   //, ["#eeeeee", "#ffffff"]
   , Time
   , Interval
  );
 
  Fade.Go();
 
  var FadedAu = Fade.Get.Au();
  document.title = FadedAu.Subject+" "+FadedAu.Version;
 
  Fade = null;

//]]>
</script>
</body>
</html>

posted @ 2013-02-18 19:31  tmscnz  阅读(198)  评论(0编辑  收藏  举报