| 网站首页 | JAVA文章 | AppServers | Web开发 | 应用开发 | 资源下载 | 论坛
    学好外语能够获得更多的国外先进编程技术  [enadd  2006年12月25日]        
设为首页 加入收藏 联系站长
您现在的位置: 编程笔记网 >> Web开发 >> 网络编程 >> AJAX >> 文章正文
褪色一例        【字体:
褪色一例
作者:-    文章来源:-    点击数:    更新时间:2006-7-18

 

<HTML>
 <HEAD>
  <title>Main</title>
  <META http-equiv=Content-Type content="text/html; charset=gb2312">
  <link rel="stylesheet" href="style.css">  
 </HEAD>
 <body>
  <form id="Form1" method="post">
   <div id="news_root" style="LEFT:20px; TOP:20px" class="root">
    <div id="news_handle" class="handle">定制窗口<span style="TEXT-ALIGN: right"></span></div>
    <div id="news" class="text">欢迎使用褪色技术</div>
   </div>    
  </form>

 
  
  <script language="JavaScript">
  // 颜色渐变的速度
  var speed = 3;
  // 颜色渐变时需要使用的定时器对象数组
  var timers;
  
  news.style.backgroundColor = "#ffff00";
  news.style.cursor = "hand";
  timers = setTimeout("changeColor()", 100);
      
  
  function changeColor()
  {
   var color = news.style.backgroundColor;
   // 当前背景色(rgb)的rg部分:如#123456的1234
   var color_rg = color.slice(1, 5);
   // 当前背景色(rgb)的b部分:如#123456的56
   // 并将b部分增加一个数值,转换为10进制整数(向白色靠近)
   var color_b = parseInt(color.slice(5), 16) + speed;
   
   // 如果b部分不超过255
   if (color_b < 256)
   {
    // 求b的16进制形式
    var b1 = Math.floor((color_b / 16)).toString(16);
    var b2 = (color_b % 16).toString(16);
    
    // 设置新的背景色
    news.style.backgroundColor = "#" + color_rg + b1 + b2;
    
    timers = setTimeout("changeColor()", 100);
   }
   else //背景色已经是白色
   {
    // 停止计时器
    clearTimeout(timers);
   }   
  }
  </script>
 </body>
</HTML>

[1] [2] 下一页  

文章录入:enadd    责任编辑:enadd 
  • 上一篇文章:

  • 下一篇文章:
  • 发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
    最新热点 最新推荐 相关文章
  • 一个最简单的AJAX实例及解析

  • 利用AJAX与数据岛实现无刷新…

  • AJAX指南--- 操作XML入门

  • AJAX在Post中文的时候解决乱…

  • Ajax基石脚本异步并发调用参…

  • 使用Ajax的挑战

  • 二级联动下拉框

  • 了解Ajax框架

  • XMLHttpRequest和Ajax入主We…

  • 关于ajax的一些随笔

  •   网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)
    | 设为首页 | 加入收藏 | 联系站长 | 友情链接 | 版权申明 | 管理登录 |