HTML——JAVASCRIPT——光棒效果

光棒效果：建立一个表格，鼠标放到哪一行，哪一行的颜色就改变，鼠标离开那一行，那一行的颜色就恢复到原来的颜色

<!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>
</head>

<body>
<table width="700" border="1" cellspacing="0" cellpadding="0">
  <tr onmouseover="shangqu(this)" onmouseout="likai(this)" bgcolor="#FFFF66">
    <td height="30">&nbsp;</td>
    <td height="30">&nbsp;</td>
    <td height="30">&nbsp;</td>
    <td height="30">&nbsp;</td>
  </tr>
  <tr onmouseover="shangqu(this)" onmouseout="likai(this)" bgcolor="#FFFF66">
    <td height="30">&nbsp;</td>
    <td height="30">&nbsp;</td>
    <td height="30">&nbsp;</td>
    <td height="30">&nbsp;</td>
  </tr>
  <tr onmouseover="shangqu(this)" onmouseout="likai(this)" bgcolor="#FFFF66">
    <td height="30">&nbsp;</td>
    <td height="30">&nbsp;</td>
    <td height="30">&nbsp;</td>
    <td height="30">&nbsp;</td>
  </tr>
  <tr onmouseover="shangqu(this)" onmouseout="likai(this)" bgcolor="#FFFF66">
    <td height="30">&nbsp;</td>
    <td height="30">&nbsp;</td>
    <td height="30">&nbsp;</td>
    <td height="30">&nbsp;</td>
  </tr>
  <tr  onmouseover="shangqu(this)" onmouseout="likai(this)" bgcolor="#FFFF66">
    <td height="30">&nbsp;</td>
    <td height="30">&nbsp;</td>
    <td height="30">&nbsp;</td>
    <td height="30">&nbsp;</td>
  </tr>
</table>
</body>
<script type="text/javascript">

function shangqu(a)
{
    a.style.backgroundColor="red";
}
function likai(b)
{
    b.style.backgroundColor="#FFFF66";
}
</script>

</html>

时间： 2024-10-13 13:23:16

HTML——JAVASCRIPT——光棒效果的相关文章

WebForm的Repeater以及JS光棒效果

Repeater: HeaderTemplate - 在加载开始执行一遍 ItemTemplate - 有多少条数据,执行多少遍 FooterTemplate - 在加载最后执行一遍 AlternatingItemTemplate - 交替项模板 <asp:Repeater ID="Repeater1" runat="server"> <HeaderTemplate> <table id="tb1"> <

jquery添加光棒效果的各种方式以及简单动画复杂动画

过滤器.绑定事件.动画一.基本过滤器语法描述返回值 :first 选取第一个元素单个元素 :last 选取最后一个元素单个元素 :not(selector) 选取去除所有与给定选择器匹配的元素集合元素 :even 选取索引是偶数的所有元素(index 从0开始) 集合元素 :odd 选取索引是奇数的所有元素(index 从0开始) 单个元素 :eq(index) 选取索引等于index的元素集合元素 :gt 选取索引大于index的元素集合元素 :lt 选取索引小于index的

webform 光棒效果，删除操作弹出确定取消窗口

鼠标移入onmouseover和鼠标移出onmouseout,代码里没大写我这也就不大写了.那首先,我们得获取Class 为tr_item里的所有东西,也就是项标签里的数据.然后呢,我们定义一个oldColor为空,一会用来记录原来的颜色.接着,我们用for循环把两个事件给项标签里所有的东西都附上. <%-- 光棒效果 --%> <script type="text/javascript"> window.onload = function () { var

使用jQuery实现光棒效果

<!doctype html><html><head><meta charset="utf-8"><title>使用jQuery实现光棒效果</title><link href="4-1.css" rel="stylesheet" type="text/css" /><script type="text/javascript&q

HTML7常用的类型刮刮乐光棒效果

常用的类型: 1.数学: Math.ceil():天花板数 Math.floor():地板数 Math.round():四舍五入取整数 Math.random():生成0-1之间的随机数 2.日期时间: var s = new Date(); var s = new Date(1999,7,23); 函数: getFullYear(): getMonth(): getDate():获取日 getHours() getMinutes() getSeconds() getDay():获取星期 s

JavaScript--------------------jQuery中.bind() .live() .delegate() .on()的区别和三种方式写光棒事件动画

bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数. $("a").bind("click",function(){alert("ok");}); live(type,[data],fn) 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的 $("a").live("click",function(){alert("ok");}); de

GridView控件的光棒效应

1 // 光棒效应 2 protected void gvBookInfos_RowDataBound(object sender, GridViewRowEventArgs e) 3 { 4 if(e.Row.RowType==DataControlRowType.DataRow) 5 { 6 e.Row.Attributes.Add("onmouseover", "currentColor=this.style.backgroundColor;this.style.bac

JavaScript之放大镜效果2

在放大图片效果的同时,我们怎么原图和放大窗体增加间隔呢? 我们只需应用一个table就行了: 源码上: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" con

javascript实现五角星效果

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>JQuery Adventures</title> <style> *{ padding:0; margin:0;} li { list-style:none;} #ul1 {