shawl.qiu Javascript 渐隐渐显类 Faded V1.0

 shawl.qiu Javascript 渐隐渐显类 Faded V1.0



说明:
嗯, 这个呢, 最近在了解色彩学, 所以陆续会弄一些与色彩相关的东西.
比如整理一些与色彩相关的资料汇编成册, 学习与色彩相关的心理感受,  调色技巧等.

目录:
1. 调用
1.1 调用 1
1.2 调用 2
2. 类 Faded

shawl.qiu
2007-06-20
http://blog.csdn.net/btbtd

演示1: http://files.myopera.com/btbtd/javascript/class/faded/Faded_v1-0.htm
演示2: http://files.myopera.com/btbtd/javascript/class/faded/Faded_v1-0_demo_1.htm

下载: http://files.myopera.com/btbtd/javascript/class/faded/Faded_v1-0.7z

内容:
1. 调用
1.1 调用 1

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <!-- DW6 -->
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>shawl.qiu template</title>
  7. <style type="text/css">
  8. /* <![CDATA[ */
  9.  div{margin:1px; vertical-align:middle;}
  10.  
  11.  .FadeId18Class
  12.  {
  13.   color:white;
  14.  }
  15.  .FadeId18OverClass
  16.  {
  17.   color:#D369A4;
  18.  }
  19. /* ]]> */
  20. </style>

  21. </head>
  22. <body>

  23. <table  border="0" align="center" cellpadding="4" cellspacing="4">
  24.  <tr align="center" valign="middle">
  25.   <td><div id="FadeId1" style="width:100px; height:100px; background-color:#cccccc; ">shawl.qiu</div></td>
  26.   <td><div id="FadeId2" style="width:100px; height:100px; background-color:#cccccc; ">shawl.qiu</div></td>
  27.   <td><div id="FadeId3" style="width:100px; height:100px; background-color:#cccccc; ">shawl.qiu</div></td>
  28.  <td><div id="FadeId4" style="width:100px; height:100px; background-color:#cccccc; ">shawl.qiu</div></td>
  29.  <td><div id="FadeId5" style="width:100px; height:100px; background-color:#cccccc; ">shawl.qiu</div></td>
  30.  </tr>
  31.  <tr align="center" valign="middle">
  32.   <td><div id="FadeId6" style="width:100px; height:100px; background-color:#cccccc; ">shawl.qiu</div></td>
  33.   <td><div id="FadeId7" style="width:100px; height:100px; background-color:#cccccc; ">shawl.qiu</div></td>
  34.   <td><div id="FadeId8" style="width:100px; height:100px; background-color:#cccccc; ">shawl.qiu</div></td>
  35.  <td><div id="FadeId9" style="width:100px; height:100px; background-color:#cccccc; ">shawl.qiu</div></td>
  36.  <td><div id="FadeId10" style="width:100px; height:100px; background-color:#cccccc; ">shawl.qiu</div></td>
  37.  </tr>
  38.  <tr align="center" valign="middle">
  39.   <td><div id="FadeId11" style="width:100px; height:100px; background-color:#cccccc; ">shawl.qiu</div></td>
  40.   <td><div id="FadeId12" style="width:100px; height:100px; background-color:#cccccc; ">shawl.qiu</div></td>
  41.   <td><div id="FadeId13" style="width:100px; height:100px; background-color:#cccccc; ">shawl.qiu</div></td>
  42.  <td><div id="FadeId14" style="width:100px; height:100px; background-color:#cccccc; ">shawl.qiu</div></td>
  43.  <td><div id="FadeId15" style="width:100px; height:100px; background-color:#cccccc; ">shawl.qiu</div></td>
  44.  </tr>
  45.  <tr align="center" valign="middle">
  46.   <td><div id="FadeId16" style="width:100px; height:100px; background-color:#cccccc; ">shawl.qiu</div></td>
  47.   <td><div id="FadeId17" style="width:100px; height:100px; background-color:#cccccc; ">shawl.qiu</div></td>
  48.   <td><div id="FadeId18" style="width:100px; height:100px; background-color:#cccccc; ">shawl.qiu</div></td>
  49.  <td><div id="FadeId19" style="width:100px; height:100px; background-color:#cccccc; ">shawl.qiu</div></td>
  50.  <td><div id="FadeId20" style="width:100px; height:100px; background-color:#cccccc; ">shawl.qiu</div></td>
  51.  </tr>
  52.  <tr align="center" valign="middle">
  53.   <td><div id="FadeId21" style="width:100px; height:100px; background-color:#cccccc; ">shawl.qiu</div></td>
  54.   <td><div id="FadeId22" style="width:100px; height:100px; background-color:#cccccc; ">shawl.qiu</div></td>
  55.   <td><div id="FadeId23" style="width:100px; height:100px; background-color:#cccccc; ">shawl.qiu</div></td>
  56.   <td><div id="FadeId24" style="width:100px; height:100px; background-color:#cccccc; ">shawl.qiu</div></td>
  57.  <td><div id="FadeId25" style="width:100px; height:100px; background-color:#cccccc; ">shawl.qiu</div></td>
  58.  </tr>
  59. </table>
  60. <script type="text/javascript" src="Faded_v1-0.js"></script>
  61. <script type="text/javascript">
  62. //<![CDATA
  63.  var Time = 20;
  64.  var Interval = 5;
  65.   
  66.  var Fade = new Faded();
  67.   Fade.Debug = false;
  68. /*
  69.   function fAddElement
  70.   (sId, sOriginColor, sOverColor, sOutColor, iTime, iIntervalMs, bCompColor, sClassName, sOverClassName)
  71. */
  72.   Fade.Element.Add("FadeId1", "#C4D700", "#cccccc", false, Time, Interval);
  73.   Fade.Element.Add("FadeId2", "#C80852", "#cccccc", false, Time, Interval);
  74.   Fade.Element.Add("FadeId3", "#EA5520", "#cccccc", false, Time, Interval);
  75.   Fade.Element.Add("FadeId4", "#F7AB00", "#cccccc", false, Time, Interval);
  76.   Fade.Element.Add(document.getElementById("FadeId5"), "#B0DCD5", "#cccccc", false, Time, Interval);
  77.   
  78.   Fade.Element.Add("FadeId6", "#59C3E2", "#cccccc", false, Time, Interval, true);
  79.   Fade.Element.Add("FadeId7", "#F0F8FF", "#cccccc", false, Time, Interval, true);
  80.   Fade.Element.Add("FadeId8", "#134098", "#cccccc", false, Time, Interval, true);
  81.   Fade.Element.Add("FadeId9", "#735B9F", "#cccccc", false, Time, Interval, true);
  82.   Fade.Element.Add("FadeId10", "#C2737F", "#cccccc", false, Time, Interval, true);
  83.   
  84.   Fade.Element.Add("FadeId11", "#FFF8B1", "#cccccc", false, Time, Interval, true);
  85.   Fade.Element.Add("FadeId12", "#3D7D53", "#cccccc", false, Time, Interval, true);
  86.   Fade.Element.Add("FadeId13", "#ffffff", "#cccccc", false, Time, Interval, true);
  87.   Fade.Element.Add("FadeId14", "#E5A96B", "#cccccc", false, Time, Interval, true);
  88.   Fade.Element.Add("FadeId15", "#ADD8E6", "#cccccc", false, Time, Interval, true);
  89.   
  90.   Fade.Element.Add("FadeId16", "#002FA7", "#cccccc", false, Time, Interval, true);
  91.   Fade.Element.Add("FadeId17", "#4C8DB5", "#cccccc", false, Time, Interval, true);
  92.   Fade.Element.Add("FadeId18", "#527AA3", "#cccccc", false, Time, Interval, false
  93.    "FadeId18Class", "FadeId18OverClass");
  94.   Fade.Element.Add("FadeId19", "#9D899D", "#cccccc", false, Time, Interval, true);
  95.   Fade.Element.Add("FadeId20", "#6F196F", "#cccccc", false, Time, Interval, true);
  96.   
  97.   Fade.Element.Add("FadeId21", "#D369A4", "#cccccc", false, Time, Interval, true);
  98.   Fade.Element.Add("FadeId22", "#BBA1CB", "#cccccc", false, Time, Interval, true);
  99.   Fade.Element.Add("FadeId23", "#FFFF00", "#cccccc", false, Time, Interval, true);
  100.   Fade.Element.Add("FadeId24", "#7BB99B", "#cccccc", false, Time, Interval, true);
  101.   Fade.Element.Add("FadeId25", "#7E4985", "#cccccc", false, Time, Interval, true);
  102.   
  103.   Fade.Go();
  104.   
  105.   document.title = Fade.au.Subject+" "+Fade.au.Version;
  106.   
  107.   Fade = null;
  108. //]]>
  109. </script>
  110. </body>
  111. </html>

1.2 调用 2

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <!-- DW6 -->
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>shawl.qiu template</title>
  7. <style type="text/css">
  8. /* <![CDATA[ */
  9.  div{margin:1px; vertical-align:middle;}
  10.  
  11.  .FadeId18Class
  12.  {
  13.   color:white;
  14.  }
  15.  .FadeId18OverClass
  16.  {
  17.   color:#D369A4;
  18.  }
  19. /* ]]> */
  20. </style>

  21. </head>
  22. <body>

  23. <table  border="0" align="center" cellpadding="4" cellspacing="4" id="MainTable">
  24.  <tr align="center" valign="middle">
  25.   <td><div style="width:100px; height:100px; background-color:#cccccc; ">shawl.qiu</div></td>
  26.   <td><div style="width:100px; height:100px; background-color:#cccccc; ">shawl.qiu</div></td>
  27.   <td><div style="width:100px; height:100px; background-color:#cccccc; ">shawl.qiu</div></td>
  28.  <td><div style="width:100px; height:100px; background-color:#cccccc; ">shawl.qiu</div></td>
  29.  <td><div style="width:100px; height:100px; background-color:#cccccc; ">shawl.qiu</div></td>
  30.  </tr>
  31.  <tr align="center" valign="middle">
  32.   <td><div style="width:100px; height:100px; background-color:#cccccc; ">shawl.qiu</div></td>
  33.   <td><div style="width:100px; height:100px; background-color:#cccccc; ">shawl.qiu</div></td>
  34.   <td><div style="width:100px; height:100px; background-color:#cccccc; ">shawl.qiu</div></td>
  35.  <td><div style="width:100px; height:100px; background-color:#cccccc; ">shawl.qiu</div></td>
  36.  <td><div style="width:100px; height:100px; background-color:#cccccc; ">shawl.qiu</div></td>
  37.  </tr>
  38.  <tr align="center" valign="middle">
  39.   <td><div style="width:100px; height:100px; background-color:#cccccc; ">shawl.qiu</div></td>
  40.   <td><div style="width:100px; height:100px; background-color:#cccccc; ">shawl.qiu</div></td>
  41.   <td><div style="width:100px; height:100px; background-color:#cccccc; ">shawl.qiu</div></td>
  42.  <td><div style="width:100px; height:100px; background-color:#cccccc; ">shawl.qiu</div></td>
  43.  <td><div style="width:100px; height:100px; background-color:#cccccc; ">shawl.qiu</div></td>
  44.  </tr>
  45.  <tr align="center" valign="middle">
  46.   <td><div style="width:100px; height:100px; background-color:#cccccc; ">shawl.qiu</div></td>
  47.   <td><div style="width:100px; height:100px; background-color:#cccccc; ">shawl.qiu</div></td>
  48.   <td><div style="width:100px; height:100px; background-color:#cccccc; ">shawl.qiu</div></td>
  49.  <td><div style="width:100px; height:100px; background-color:#cccccc; ">shawl.qiu</div></td>
  50.  <td><div style="width:100px; height:100px; background-color:#cccccc; ">shawl.qiu</div></td>
  51.  </tr>
  52.  <tr align="center" valign="middle">
  53.   <td><div style="width:100px; height:100px; background-color:#cccccc; ">shawl.qiu</div></td>
  54.   <td><div style="width:100px; height:100px; background-color:#cccccc; ">shawl.qiu</div></td>
  55.   <td><div style="width:100px; height:100px; background-color:#cccccc; ">shawl.qiu</div></td>
  56.   <td><div style="width:100px; height:100px; background-color:#cccccc; ">shawl.qiu</div></td>
  57.  <td><div style="width:100px; height:100px; background-color:#cccccc; ">shawl.qiu</div></td>
  58.  </tr>
  59. </table>
  60. <script type="text/javascript" src="Faded_v1-0.js"></script>
  61. <script type="text/javascript">
  62. //<![CDATA
  63.  fSetAlternativeColorAndFading("MainTable", "div");
  64.   
  65.  function fSetAlternativeColorAndFading
  66.  (
  67.   sId, 
  68.   sSubTag, 
  69.   
  70.   sBgColor1, 
  71.   sBgOverColor1, 
  72.   sClassName1, 
  73.   sOverClassName1,
  74.   
  75.   sBgColor2, 
  76.   sBgOverColor2, 
  77.   sClassName2, 
  78.   sOverClassName2,
  79.   
  80.   iTime, 
  81.   iIntervalMs,
  82.   bByNode, 
  83.   bCompColor
  84.  )
  85.  {// shawl.qiu script
  86.   var Obj = null;
  87.   if(typeof(sId)=="string") 
  88.   {
  89.    Obj = document.getElementById(sId);
  90.   }
  91.   if(Obj==null)
  92.   {
  93.    alert("主域为 null!");
  94.    return;
  95.   }
  96.   if(!sBgColor1) sBgColor1 = "#ffffff";
  97.   if(!sBgColor2) sBgColor2 = "#F5F5F5";
  98.   if(!sBgOverColor1) sBgOverColor1 = "#cccccc";
  99.   if(!sBgOverColor2) sBgOverColor2 = "#cccccc";
  100.   if(!iTime) iTime = 20;
  101.   if(!iIntervalMs) iIntervalMs = 5;
  102.   
  103.   if(!sClassName1) sClassName1 = "";
  104.   if(!sOverClassName1) sOverClassName1 = "";
  105.   if(!sClassName2) sClassName2 = "";
  106.   if(!sOverClassName2) sOverClassName2 = "";
  107.   
  108.   var Debug = false;

  109.   var ChildSet = null;
  110.   if(bByNode)
  111.   {
  112.    ChildSet = Obj.childNodes;
  113.   }
  114.   else
  115.   {
  116.    ChildSet = Obj.getElementsByTagName(sSubTag);
  117.   }
  118.   
  119.   var iCount = 0;
  120.   var iLen = ChildSet.length;
  121.   var iNodeCount = 1;
  122.   
  123.   if(Debug)
  124.   {
  125.    alert(ChildSet);
  126.    alert
  127.    (
  128.     ""
  129.     +"/n ChildSet.length: "+ChildSet.length
  130.     +"/n iCount: "+iCount
  131.     +"/n iNodeCount: "+iNodeCount
  132.     
  133.    );
  134.   }
  135.  
  136.   var Fade = new Faded();
  137.   
  138.  
  139.   while(iCount<iLen)
  140.   {
  141.    if(ChildSet[iCount].nodeType==1&&ChildSet[iCount].nodeName==(sSubTag.toUpperCase()))
  142.    {
  143.     if(iNodeCount%2==0)
  144.     {     
  145.    /*
  146.   function fAddElement
  147.   (sId, sOriginColor, sOverColor, sOutColor, iTime, iIntervalMs, bCompColor, sClassName, sOverClassName)
  148.    */
  149.      Fade.Element.Add
  150.      (
  151.       ChildSet[iCount], 
  152.       sBgColor1, 
  153.       sBgOverColor1, 
  154.       sBgColor1, 
  155.       iTime, 
  156.       iIntervalMs, 
  157.       bCompColor, 
  158.       sClassName1, 
  159.       sOverClassName1
  160.      );
  161.     }
  162.     else
  163.     {
  164.      Fade.Element.Add
  165.      (
  166.       ChildSet[iCount], 
  167.       sBgColor2, 
  168.       sBgOverColor2, 
  169.       sBgColor2, 
  170.       iTime, 
  171.       iIntervalMs, 
  172.       bCompColor, 
  173.       sClassName2, 
  174.       sOverClassName2
  175.      );
  176.     } // end if 1
  177.      
  178.     iNodeCount++;
  179.    } // ne if 
  180.    iCount++;
  181.   } // end while
  182.   
  183.   Fade.Go();
  184.   Fade = null;

  185.  } // end function fSetAlternativeColorAndFading

  186. //]]>
  187. </script>
  188. </body>
  189. </html>


2. 类 Faded

  1. // shawl.qiu JavaScript Document
  2.  /*-----------------------------------------------------------------------------------*/
  3.   * shawl.qiu Javascript Faded class v1.0
  4.  /*-----------------------------------------------------------------------------------*/
  5.  //---------------------------------begin class Faded()-------------------------------//
  6.  function Faded()
  7.  { // shawl.qiu code
  8.   //------------------------------------begin public variable
  9.   //---------------begin about
  10.   this.au = {}
  11.   this.au.Subject = "shawl.qiu Javascript Faded class";
  12.   this.au.Version = "v1.0";
  13.   this.au.Name = "shawl.qiu";
  14.   this.au.Email = "shawl.qiu@gmail.com";
  15.   this.au.Blog = "http://blog.csdn.net/btbtd";
  16.   this.au.CreatedDate = "2007-6-19";
  17.   this.au.Update = {};
  18.   this.au.Update["1"] = "";
  19.   //---------------end about
  20.   this.Debug = false;
  21.   
  22.   this.Element = {}
  23.   this.Element.Set = [];
  24.   this.Element.Add = fAddElement;
  25.   //------------------------------------end public variable
  26.   
  27.   //------------------------------------begin private variable
  28.   var Tl = this;
  29.   //------------------------------------end private variable
  30.   
  31.   //------------------------------------begin public method
  32.   this.Go = fGo;
  33.   //------------------------------------end public method
  34.  
  35.   //------------------------------------begin private method
  36.   function fAddElement
  37.   (sId, sOriginColor, sOverColor, sOutColor, iTime, iIntervalMs, bCompColor, sClassName, sOverClassName)
  38.   {
  39.    var Obj = null;
  40.    if(typeof(sId)=="string")
  41.    {
  42.     Obj = document.getElementById(sId);
  43.    }
  44.    else if(typeof(sId)=="object")
  45.    {
  46.     Obj = sId;
  47.    }
  48.    
  49.    if(!Obj||Obj==null)
  50.    {
  51.     alert("对象不能为空!");
  52.     return;
  53.    }
  54.    if(!bCompColor) bCompColor = false;
  55.    else bCompColor = true;
  56.    
  57.    if(!sClassName) sClassName = "";
  58.    if(!sOverClassName) sOverClassName = "";
  59.    
  60.    if(!sOriginColor) sOriginColor = "#ffffff";
  61.    if(!sOverColor) sOverColor = "#cccccc";
  62.    if(!sOutColor) sOutColor = sOriginColor;
  63.    if(!iTime) iTime = 10;
  64.    if(!iIntervalMs) iIntervalMs = 50;
  65.    
  66.    Obj["Extend"] = {};
  67.    Obj["Extend"]["OriginalColor"] = sOriginColor;
  68.    Obj["Extend"]["MoveColor"] = sOverColor;
  69.    Obj["Extend"]["OutColor"] = sOutColor;
  70.    Obj["Extend"]["Time"] = iTime;
  71.    Obj["Extend"]["IntervalMs"] = iIntervalMs;
  72.    Obj["Extend"]["CompColor"] = bCompColor;
  73.    
  74.    Obj["Extend"]["ClassName"] = sClassName;
  75.    Obj["Extend"]["OverClassName"] = sOverClassName;
  76.    
  77.    var iPos = Tl.Element.Set.length;
  78.    Tl.Element.Set[iPos] = Obj;
  79.    
  80.   } // end function fAddElement
  81.  
  82.   function fGo()
  83.   {
  84.    for(var i = 0, j=Tl.Element.Set.length; i<j; i++)
  85.    {
  86.     var TempObj = Tl.Element.Set[i];
  87.     
  88.     TempObj.style.backgroundColor = TempObj["Extend"]["OriginalColor"];
  89.     TempObj["Interval"] = {}
  90.         
  91.     if(TempObj["Extend"]["CompColor"])
  92.     {
  93.      TempObj.style.color = fGetCompColor(TempObj["Extend"]["OriginalColor"]);
  94.     }
  95.     
  96.     if(TempObj["Extend"]["ClassName"]!="")
  97.     {
  98.      TempObj.className = TempObj["Extend"]["ClassName"];
  99.     }
  100.     
  101.     TempObj.onmouseover =
  102.      function()
  103.      {
  104.       try
  105.       {
  106.        clearInterval(this["Interval"]["Out"]["Go"]);
  107.       }
  108.       catch(e)
  109.       {
  110.       }
  111.       
  112.       this["Interval"]["Over"] ={}
  113.       this["Interval"]["Over"]["Count"] = 0;
  114.        
  115.       if(this["Extend"]["OverClassName"]!="")
  116.       {
  117.        this.className = this["Extend"]["OverClassName"];
  118.       }
  119.        
  120.       var BgColor = this.style.backgroundColor==""?"#ffffff":this.style.backgroundColor;
  121.       if(/rgb/(/i.test(BgColor))
  122.       {
  123.        BgColor = fRgbToHex(BgColor);
  124.       }
  125.       
  126.       //function fGetCompColor(sInput, sOpt, bNoSharp, bDebug)
  127.       this["Interval"]["Over"]["FadeArray"] = 
  128.        fFade
  129.        (
  130.         BgColor, 
  131.         this["Extend"]["MoveColor"], 
  132.         this["Extend"]["Time"], 
  133.         false
  134.         true
  135.        );
  136.        
  137.       var me = this;
  138.       
  139.       this["Interval"]["Over"]["Go"] = 
  140.        setInterval
  141.        (
  142.         function()
  143.         {

  144.          if(me["Interval"]["Over"]["Count"]>=me["Interval"]["Over"]["FadeArray"].length)
  145.          {
  146.           clearInterval(me["Interval"]["Over"]["Go"]);
  147.           me["Interval"]["Over"]["Count"] = null;
  148.           return;
  149.          }
  150.          
  151.          var sBgColor = me["Interval"]["Over"]["FadeArray"][me["Interval"]["Over"]["Count"]];
  152.          
  153.          me.style.backgroundColor = sBgColor;
  154.          
  155.          if(me["Extend"]["CompColor"])
  156.          {
  157.           me.style.color = fGetCompColor(sBgColor);
  158.          }
  159.           
  160.          if(Tl.Debug)
  161.          defaultStatus = me["Interval"]["Over"]["Count"];
  162.          
  163.          me["Interval"]["Over"]["Count"]++;
  164.         }
  165.         ,
  166.         me["Extend"]["IntervalMs"]
  167.        ) // end setInterval
  168.      } // end TempObj.onmouseover

  169.     TempObj.onmouseout =
  170.      function()
  171.      {
  172.       try
  173.       {
  174.        clearInterval(this["Interval"]["Over"]["Go"]);
  175.       }
  176.       catch(e)
  177.       {
  178.       }
  179.       
  180.       this["Interval"]["Out"] ={}
  181.       this["Interval"]["Out"]["Count"] = 0;
  182.        
  183.       if(this["Extend"]["ClassName"]!="")
  184.       {
  185.        this.className = this["Extend"]["ClassName"];
  186.       }
  187.       
  188.       var BgColor = this.style.backgroundColor==""?"#ffffff":this.style.backgroundColor;
  189.       if(/rgb/(/i.test(BgColor))
  190.       {
  191.        BgColor = fRgbToHex(BgColor);
  192.       }
  193.       
  194.       this["Interval"]["Out"]["FadeArray"] = 
  195.        fFade
  196.        (
  197.         BgColor, 
  198.         this["Extend"]["OutColor"], 
  199.         this["Extend"]["Time"], 
  200.         false
  201.         true
  202.        );
  203.        
  204.       var me = this;
  205.       
  206.       this["Interval"]["Out"]["Go"] = 
  207.        setInterval
  208.        (
  209.         function()
  210.         {
  211.          if(me["Interval"]["Out"]["Count"]>=me["Interval"]["Out"]["FadeArray"].length)
  212.          {
  213.           clearInterval(me["Interval"]["Out"]["Go"]);
  214.           me["Interval"]["Out"]["Count"] = null;
  215.           return;
  216.          }
  217.          
  218.          var sBgColor = me["Interval"]["Out"]["FadeArray"][me["Interval"]["Out"]["Count"]];
  219.          
  220.          me.style.backgroundColor = sBgColor;
  221.          
  222.          if(me["Extend"]["CompColor"])
  223.          {
  224.           me.style.color = fGetCompColor(sBgColor);
  225.          }
  226.           
  227.          if(Tl.Debug)
  228.          defaultStatus = me["Interval"]["Out"]["Count"];
  229.          
  230.          me["Interval"]["Out"]["Count"]++;
  231.         }
  232.         ,
  233.         me["Extend"]["IntervalMs"]
  234.        ) // end setInterval
  235.      } // end TempObj.onmouseover
  236.     } // end for
  237.   } // end function fGo
  238.   
  239.   function fFade(sOriginalColor, sFinalColor, iTime, sOpt/*positive|negative|auto*/, bPadSharp)
  240.   {// shawl.qiu script : return Array
  241.    if(!sOriginalColor||sOriginalColor=="")
  242.    {
  243.     alert("原色不能为空!");
  244.     return;
  245.    }
  246.    if(!sFinalColor||sFinalColor=="")
  247.    {
  248.     alert("最终色不能为空!");
  249.     return;
  250.    }
  251.    if(!iTime||typeof(iTime)!="number") iTime = 5;
  252.    if(!sOpt) sOpt = "auto";
  253.    var sSharp = "";
  254.    if(bPadSharp) sSharp = "#";
  255.    
  256.    var Debug = false;
  257.    var oAr = fSplitColor(sOriginalColor);
  258.    var oArInt = fHexArrayToInt(oAr);
  259.    
  260.    var fAr = fSplitColor(sFinalColor);
  261.    var fArInt = fHexArrayToInt(fAr);
  262.    
  263.    var ReturnAr = [];
  264.    
  265.    switch(sOpt)
  266.    {
  267.     default:
  268.      var SubtractAr = [];
  269.      var SpanAr = [];
  270.      var ReturnArInt = [];
  271.      
  272.      for(var i=0, j=oArInt.length; i<j; i++)
  273.      {
  274.       SubtractAr[i] = fArInt[i] - oArInt[i];
  275.       SpanAr[i] = SubtractAr[i]/iTime;
  276.      }
  277.      
  278.      for(var i=0, j=iTime; i<j; i++)
  279.      {
  280.       ReturnArInt[i] = [];
  281.       ReturnArInt[i][0] = parseInt(oArInt[0]+(SpanAr[0]*(i+1)));
  282.       ReturnArInt[i][1] = parseInt(oArInt[1]+(SpanAr[1]*(i+1)));
  283.       ReturnArInt[i][2] = parseInt(oArInt[2]+(SpanAr[2]*(i+1)));
  284.       
  285.       ReturnAr[i] = ""
  286.        +sSharp
  287.        +fPadStr(ReturnArInt[i][0].toString(16)).toUpperCase()
  288.        +fPadStr(ReturnArInt[i][1].toString(16)).toUpperCase()
  289.        +fPadStr(ReturnArInt[i][2].toString(16)).toUpperCase()
  290.        ;
  291.      }
  292.      sFinalColor= sFinalColor.replace(/^/#/, "");
  293.      if(bPadSharp) sFinalColor = "#"+sFinalColor;
  294.      ReturnAr[ReturnAr.length-1] = sFinalColor.toUpperCase();
  295.      break;
  296.    }
  297.    
  298.    if(Debug)
  299.    {
  300.     alert
  301.     (
  302.      " oAr: "+oAr
  303.      +"/n oArInt: "+oArInt
  304.      +"/n fAr: "+fAr
  305.      +"/n fArInt: "+fArInt
  306.      +"/n typeof(sOpt): "+typeof(sOpt)
  307.      +"/n SubtractAr: "+SubtractAr
  308.      +"/n SpanAr: "+SpanAr
  309.      +"/n ReturnArInt: "+ReturnArInt
  310.      +"/n ReturnAr: "+ReturnAr
  311.     );
  312.    } // end if
  313.    
  314.    return ReturnAr.slice();
  315.   } // end function fFade
  316.   
  317.   function fPadStr(sSrc, sPad, nLen)
  318.   {// shawl.qiu script
  319.    if(!sSrc)return false;
  320.    if(!sPad)sPad='0';
  321.    if(!nLen)nLen=2;
  322.    sSrc+='';
  323.    if(sSrc.length>=nLen)return sSrc;
  324.    sPad=new Array(nLen+1).join(sPad);
  325.    var re=new RegExp('.*(.{'+(nLen)+'})$');
  326.    return (sPad+sSrc).replace(re,'$1');
  327.   } // end function fPadStr
  328.   
  329.   function fHexArrayToInt(ar)
  330.   { // shawl.qiu script : return array
  331.    var TempAr = [];
  332.    for(var i=0, j=ar.length; i<j; i++)
  333.    {
  334.     TempAr[i] = parseInt(ar[i], 16);
  335.    }
  336.    return TempAr.slice();
  337.   } // end function fHexArrayToInt
  338.   
  339.   function fSplitColor(sColor)
  340.   { // shawl.qiu script : return array
  341.    if(!sColor||sColor=="")
  342.    {
  343.     alert("颜色不能为空!");
  344.     return;
  345.    }
  346.    var Debug = true;
  347.    sColor = sColor.replace(/^/#/, "");
  348.    if(sColor.length == 3)
  349.    {
  350.     var sTemp = "";
  351.     for(var i = 0, j=sColor.length; i<j; i++)
  352.     {
  353.      sTemp+= ""+sColor.charAt(i)+sColor.charAt(i);
  354.     }
  355.     sColor = sTemp;
  356.    }
  357.    
  358.    if(sColor.length!=6)
  359.    {
  360.     alert("无法识别的颜色代码!")
  361.     return;
  362.    }
  363.    
  364.    var arHex = [];
  365.    arHex[0] = ""+sColor.charAt(0)+sColor.charAt(1);
  366.    arHex[1] = ""+sColor.charAt(2)+sColor.charAt(3);
  367.    arHex[2] = ""+sColor.charAt(4)+sColor.charAt(5);
  368.    
  369.    return arHex.slice();
  370.   } // end function fSplitColor
  371.   
  372.   function fGetCompColor(sInput, sOpt, bNoSharp, bDebug)
  373.   {// shawl.qiu script : return string
  374.    if(!sInput) sInput = "#000000";
  375.    if(!sOpt) sOpt = 'hex';
  376.    sOpt = sOpt.toLowerCase();
  377.    
  378.    var arCell = [];
  379.    var arHex = [];
  380.    var arHexFinal = [];
  381.    var arInt = [];
  382.    var arIntFinal = [];
  383.    
  384.    var Debug = bDebug;
  385.    
  386.    if(Debug)
  387.    {
  388.     alert
  389.     (
  390.      "sInput: "+sInput
  391.      +" sOpt: "+sOpt
  392.     );
  393.    }
  394.    
  395.    sInput = sInput.replace(/^/#/, "");
  396.     
  397.    switch(sOpt)
  398.    {
  399.     case "rgb":
  400.      break;
  401.      
  402.     default:
  403.      
  404.      if(sInput.length==3)
  405.      {
  406.       var arTemp = fStringToArray(sInput);
  407.       sInput = ""+arTemp[0]+arTemp[0]+arTemp[1]+arTemp[1]+arTemp[2]+arTemp[2];
  408.      }
  409.      
  410.      if(sInput.length==6)
  411.      {
  412.       arCell = fStringToArray(sInput);     
  413.       
  414.       arHex[0] = "0x"+arCell[0]+arCell[1];
  415.       arHex[1] = "0x"+arCell[2]+arCell[3];
  416.       arHex[2] = "0x"+arCell[4]+arCell[5];
  417.       
  418.       arInt[0] = parseInt(arHex[0], 16);
  419.       arInt[1] = parseInt(arHex[1], 16);
  420.       arInt[2] = parseInt(arHex[2], 16);
  421.       
  422.       arIntFinal[0] = Math.abs(255-arInt[0]);
  423.       arIntFinal[1] = Math.abs(255-arInt[1]);
  424.       arIntFinal[2] = Math.abs(255-arInt[2]);
  425.       
  426.       arHexFinal[0] = fPadStr(arIntFinal[0].toString(16)).toUpperCase();
  427.       arHexFinal[1] = fPadStr(arIntFinal[1].toString(16)).toUpperCase();
  428.       arHexFinal[2] = fPadStr(arIntFinal[2].toString(16)).toUpperCase();
  429.       
  430.       if(Debug)
  431.       {
  432.        alert("arCell: "+arCell);
  433.        alert("arHex: "+arHex);
  434.        alert("arInt: "+arInt);
  435.        alert("arIntFinal: "+arIntFinal);
  436.        alert("arHexFinal: "+arHexFinal);
  437.       }
  438.       
  439.       if(bNoSharp) return arHexFinal.join("");
  440.       
  441.       return "#"+arHexFinal.join("");
  442.      }
  443.      else
  444.      {
  445.       alert("无法识别的十六进制颜色代码!");
  446.      }
  447.      break;   
  448.    }
  449.    return "000000";
  450.   
  451.    function fStringToArray(sInput)
  452.    {// shawl.qiu script
  453.     var arCell = [];
  454.     var iCount = 0;
  455.     var iLen = sInput.length;
  456.     while(iCount<iLen)
  457.     {
  458.      arCell[iCount] = sInput.charAt(iCount);
  459.      iCount++;
  460.     }
  461.     
  462.     return arCell;
  463.    } // end function fStringToArray
  464.    
  465.    function fPadStr(sSrc, sPad, nLen)
  466.    {// shawl.qiu script
  467.     if(!sSrc)return false;
  468.     if(!sPad)sPad='0';
  469.     if(!nLen)nLen=2;
  470.     sSrc+='';
  471.     if(sSrc.length>=nLen)return sSrc;
  472.     sPad=new Array(nLen+1).join(sPad);
  473.     var re=new RegExp('.*(.{'+(nLen)+'})$');
  474.     return (sPad+sSrc).replace(re,'$1');
  475.    } // end function fPadStr
  476.    
  477.   } // end function fGetCompColor
  478.   
  479.   function fRgbToHex(sRgb, bNoSharp, bDebug)
  480.   { // shawl.qiu script
  481.    if(!sRgb||sRgb=="")
  482.    {
  483.     alert("RGB颜色代码不正确!");
  484.     return;
  485.    }
  486.    var Debug = bDebug;
  487.    
  488.    var sSharp = "";
  489.    if(!bNoSharp) sSharp = "#";
  490.    if(/rgb/(/i.test(sRgb))
  491.    {
  492.     sRgb = sRgb.replace(/^[/s/S]*?rgb/((.*?)/)[/s/S]*/gi, "$1").replace(//s+/g, "");
  493.    }
  494.    var RgbAr = sRgb.split(",");
  495.    var sReturn = "";
  496.    sReturn = 
  497.     sSharp
  498.     +(fPadStr((RgbAr[0]-0).toString(16)).toUpperCase())
  499.     +(fPadStr((RgbAr[1]-0).toString(16)).toUpperCase())
  500.     +(fPadStr((RgbAr[2]-0).toString(16)).toUpperCase())
  501.     ;
  502.    
  503.    if(Debug)
  504.    {
  505.     alert(sReturn);
  506.    }
  507.    
  508.    return sReturn;
  509.    
  510.    function fPadStr(sSrc, sPad, nLen)
  511.    {// shawl.qiu script
  512.     if(!sSrc)return false;
  513.     if(!sPad)sPad='0';
  514.     if(!nLen)nLen=2;
  515.     sSrc+='';
  516.     if(sSrc.length>=nLen)return sSrc;
  517.     sPad=new Array(nLen+1).join(sPad);
  518.     var re=new RegExp('.*(.{'+(nLen)+'})$');
  519.     return (sPad+sSrc).replace(re,'$1');
  520.    } // end function fPadStr
  521.    
  522.   } // end function fRgbToHex

  523.   //------------------------------------end private method
  524.  } // shawl.qiu code
  525.  //---------------------------------end class Faded()---------------------------------//
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值