低一度

顶部横幅

表格隔行换色及鼠标悬停、单击效果

2010-12-2 - diyidu - 网页设计 - Views

一转瞬，十来天没更新了，大伙儿千万别以为哥放弃了低一度哦。事实上，这些天我也是天天在盯着低一度的，只可惜，能腾出来写点儿东西的时间实在太少：上一周7天中有5天是在出差中度过的，5天的出差时间又有4天是在酒精中泡过的，哎，难得清醒啊！回来以后，又正巧遇上家里的路由器烧坏掉，借着买新路由的机会，索性一不做二不休，将家里这两台“问题电脑”（台式的早前就罢工了，本本漏静电）全扛出去修理得了。可不修不要紧，一修就发现问题不简单，什么显卡烧掉啊，什么桥断掉啊，什么主板有问题啊……直到今天，还有一台正在被研究中！服了。而白天上班呢，事情多得喘不过气来，无休止地看稿，令哥的近视度数明显增加，又有杂七杂八的琐事儿……真不知道，这还让不让人活了！

可话虽如此，烦躁归烦躁，这么久了要还是不出来泡个冒着实真说不过去。也罢，今天哥挤点儿时间，写个 CSS+javascript 的特效分享吧——

先看演示：demo1.html

实现代码：

<!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=utf-8" />
<title>表格隔行换色及鼠标悬停、单击效果 - 低一度博客</title>
<style type="text/css">
.warp_table {border-collapse:collapse; width:550px; border:1px solid #4d9ab0}
.warp_table td {border:1px solid #4d9ab0}
</style>
<script language="javascript"><!--
function senfe(o,a,b,c,d){
 var t=document.getElementById(o).getElementsByTagName("tr");
 for(var i=0;i<t.length;i++){
  t[i].style.backgroundColor=(t[i].sectionRowIndex%2==0)?a:b;
  t[i].onclick=function(){
   if(this.x!="1"){
    this.x="1";
    this.style.backgroundColor=d;
   }else{
    this.x="0";
    this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
   }
  }
  t[i].onmouseover=function(){
   if(this.x!="1")this.style.backgroundColor=c;
  }
  t[i].onmouseout=function(){
   if(this.x!="1")this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
  }
 }
}
--></script>
</head>
<body>
<h1>表格隔行换色及鼠标悬停、单击效果</h1>
<h3><a href="http://www.diyidu.cn">www.diyidu.cn</a></h3>
<table class="warp_table" id="changecolor">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<script language="javascript"><!--
//senfe("表格名称","奇数行背景","偶数行背景","鼠标经过背景","点击后背景");
senfe("changecolor","#f8fbfc","#e5f1f4","#ecfbd4","#bce774");
--></script>
</body>
</html>

OK，Enjoy it.

关键词 // css应用 JavaScript 网页设计 低一度
出处：低一度，链接：http://www.diyidu.cn/post/table_bg.html

上一篇：9款Firefox插件提高设计开发效率 下一篇：基于jQuery的网页Tab选项卡导航

随机推荐

to "表格隔行换色及鼠标悬停、单击效果"

  • 太阳博客
    #1 太阳博客 回复该留言 2010-12-2 8:43:18
    大忙人一个啊，注意身体健康，别丢了本钱。
    爱好者博客 于 2010-12-3 12:10:23 回复
    哈哈，桶哥你太忙啦，还要更新10万个为什么。年底了，冬天了，注意身体。
  • 其实
    #3 其实 回复该留言 2010-12-2 13:04:53
    我就不忘记桶哥，隔三差五地来低一度瞧瞧！有新文章了，蜘蛛也会常来的！
  • 大踏步走
    #7 大踏步走 回复该留言 2010-12-3 11:21:55
    很实用的效果，哥们真是样样精通呀！对了，代码中的“X”是什么属性？
    xx 于 2010-12-6 14:32:27 回复
    就一个垃圾代码就说样样精通？这代码也太他妈的长。
    桶哥 于 2010-12-6 15:42:45 回复
    只能说你太弱智，看不懂这是哥整合的页面代码吗？去掉HEAD和样式以及BODY，真正的特效代码还剩几行？看不懂就别乱吠哦。
    xx 于 2010-12-6 17:07:53 回复
    没你这么弱智，ZB默认就带JQ为什么不搞个JQ的出演示一下？
    xx 于 2010-12-6 17:08:44 回复
    最讨厌这些没事就会拍马屁的人。
    xx 于 2010-12-6 17:13:14 回复
    你这贱B，每个<tr>点击后就搞成绿色，每个都点都变绿，有必要？
    桶哥 于 2010-12-7 16:31:50 回复
    有能耐就不要披马甲。像你爷爷的龟头一样。老子写我的代码碍你B事？你爹我爱怎么写就怎么写，咋滴？
    桶哥 于 2010-12-7 16:37:32 回复
    继续吧，你的傻逼IP已经将你的龟头暴露出来了。好丑陋！
  • 爱必妥
    #8 爱必妥 回复该留言 2010-12-3 12:53:59
    还是忙正事要紧啊，桶哥的博客做得这么好呢，怎么可能轻易放弃。
  • 大猪
    #17 大猪 回复该留言 2010-12-6 15:36:52
    虽然很初级的东西，但支持一下，另外，好久没来桶哥这里了。
    xx 于 2010-12-6 17:05:48 回复
    简直无聊。。。
    大猪 于 2010-12-6 20:15:19 回复
    呃。。我真没无聊。
    xx 于 2010-12-6 22:43:15 回复
    我说低一度没说大猪，呵呵。
  • 老实人博客
    #22 老实人博客 回复该留言 2010-12-7 22:34:23
    许多导航网站，都是这么做的吧。以前觉得非常的神秘，搞不明白~现在慢慢也知道一些了。
  • freesky
    #31 freesky 回复该留言 2011-1-17 9:48:10
    这些我都加上了，用jquery过程中才感觉到z-blog与别的区别，真的很方便。

Add comment

验证码