我的第一次讲座内容之一——使用Jquery实现光棒效果
?
<!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=gb2312" />
<title>光棒效果</title>
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript">
?
?$(function(){
? ?//隔行换色效果
? ?$("#tb tr").each(function(i){
? ? ?this.style.backgroundColor=['#FFD5BF','#fff'][i%2];
? ?});
? ?
? ?//光棒效果
? ?var oldColor;//原来颜色
? ?$("#tb tr").hover(function(){//为行添加鼠标悬浮事件
? ? ?oldColor=$(this).css("backgroundColor");//获取原来颜色
$(this).css("backgroundColor","#FF6600");//设置鼠标悬浮时颜色
? ?},function(){
? ? ?$(this).css("backgroundColor",oldColor);//恢复原来颜色
? ?});
?});
</script>
</head>
<body>
<table id="tb" width="500" border="1" align="center" cellpadding="0" cellspacing="0">
? <tr>
? ? <th colspan="5" bgcolor="#3399FF">光棒效果</th>
? </tr>
? <tr>
? ? <td>1</td>
? ? <td>1</td>
? ? <td>1</td>
? ? <td>1</td>
? ? <td>1</td>
? </tr>
? <tr>
? ? <td>1</td>
? ? <td>1</td>
? ? <td>1</td>
? ? <td>1</td>
? ? <td>1</td>
? </tr>
? <tr>
? ? <td>1</td>
? ? <td>1</td>
? ? <td>1</td>
? ? <td>1</td>
? ? <td>1</td>
? </tr>
? <tr>
? ? <td>1</td>
? ? <td>1</td>
? ? <td>1</td>
? ? <td>1</td>
? ? <td>1</td>
? </tr>
? <tr>
? ? <td>1</td>
? ? <td>1</td>
? ? <td>1</td>
? ? <td>1</td>
? ? <td>1</td>
? </tr>
? <tr>
? ? <td>1</td>
? ? <td>1</td>
? ? <td>1</td>
? ? <td>1</td>
? ? <td>1</td>
? </tr>
? <tr>
? ? <td>1</td>
? ? <td>1</td>
? ? <td>1</td>
? ? <td>1</td>
? ? <td>1</td>
? </tr>
? <tr>
? ? <td>1</td>
? ? <td>1</td>
? ? <td>1</td>
? ? <td>1</td>
? ? <td>1</td>
? </tr>
? <tr>
? ? <td>1</td>
? ? <td>1</td>
? ? <td>1</td>
? ? <td>1</td>
? ? <td>1</td>
? </tr>
</table>
</body>
</html>