简单隔行换色鼠标经过变色特效

2个月前 (06-05 14:06)阅读回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值5294
  • 级别管理员
  • 主题1058
  • 回复2
楼主

很简单的表格隔行换色效果,鼠标经过时还改变背景颜色,根据网页色彩搭配自定义加亮颜色代码。

<style type="text/css"><!--
#senfe {
 width: 650px;
 border-top: #E3E3E3 1px solid;
 border-left: #E3E3E3 1px solid;
}
#senfe td {
 padding: 5px;border-right: #E3E3E3 1px solid;
 border-bottom: #E3E3E3 1px solid;
}
#senfe2 {
 width: 650px;
 border-top: #E3E3E3 1px solid;
 border-left: #E3E3E3 1px solid;
}
#senfe2 td {
 padding: 5px;border-right: #E3E3E3 1px solid;
 border-bottom: #E3E3E3 1px solid;
}
--></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";//本来打算直接用背景色判断,FF获取到的背景是RGB值,不好判断
    this.style.backgroundColor=d;
   }else{
    this.x="0";
    this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
   }
  }//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
  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;
  }
 }
}//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
-->
</script>
<a href="https://www.wuming.ren">武鸣人</a>,各种信息资源免费发布,分享励志语录经典短句,减肥健身常识,各种js特效代码。网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
    <P><TABLE id="senfe" cellSpacing=0 cellPadding=0 width="650px" border=0>
  <TBODY>
  <TR>
    <TD colSpan=7><H3 id=about2>电子杂志制作价格表</H3></TD></TR>
  <TR>
    <TD width="12%">版 本</TD>
    <TD width="12%">简易版</TD>
    <TD width="13%">普及版</TD>
    <TD width="13%">标准版</TD>
    <TD width="14%">专业版</TD>
    <TD width="15%">创意版</TD>
    <TD width="15%">经典版</TD>
  </TR>
  <TR>
    <TD>制作周期</TD>
    <TD>5天以内</TD>
    <TD>10天以内</TD>
    <TD>10天-15天</TD>
    <TD>30天-45天</TD>
    <TD>与客户另行协商</TD>
    <TD>与客户另行协商</TD>
  </TR>
   <TR>
    <TD colspan="7">    <p style="color:red">如果客户长期期刊制作合作,价格将更加优惠。</p></TD>
    </TR>
  </TBODY></TABLE>
     <TABLE id="senfe2" cellSpacing=0 cellPadding=0 width="650px" border=0>
      <TBODY>
        <TR>
          <TD colSpan=3><H3 id=about2>电子杂志制作单项价格表</H3></TD></TR>
        <TR>
          <TD width="12%">单项项目</TD>
        <TD width="26%">单价</TD>
        <TD width="46%">备注</TD>
        </TR>
        <TR>
          <TD>专业配音</TD>
        <TD>面议</TD>
        <TD>专业录音棚+专业录音员,看配音内容多少而定</TD>
        </TR>
        <TR>
          <TD>武鸣人</TD>
        <TD>wuming.ren</TD>
        <TD>各种信息免费发布,资源共享合作共赢</TD>
        </TR>
      </TBODY>
    </TABLE>
    </P>
  </LI>
</UL>
</DIV></DIV></DIV>
<script language="javascript"><!--
//senfe("表格名称","奇数行背景","偶数行背景","鼠标经过背景","点击后背景");
senfe("senfe","#fff","#F5F5F5","#FFFFCC","#FFFF84");
//senfe("表格名称","奇数行背景","偶数行背景","鼠标经过背景","点击后背景");
senfe("senfe2","#fff","#F5F5F5","#FFFFCC","#FFFF84");
-->
</script>


0
0
收藏0

本文来自武鸣人网站,转载请注明出处

本文地址:https://www.wuming.ren/a/1129.html

回帖

简单隔行换色鼠标经过变色特效 期待您的回复!

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息