canvas一段背景色鼠标移入后
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas一段背景色鼠标移入后相关的知识，希望对你有一定的参考价值。
参考技术A CSS3 通过css3的关键帧等方式实现动画效果，看起来好像挺实用，但这样增加了一个没有意义的DOM节点，不符合语义化编程规范SVG、Canvas 都可以使用脚本语言来实现动画
SVG 本质上是使用XML描述2D图形的语言（矢量图），SVG创建的每一个元素都是一个独立的DOM元素，既然是独立的DOM元素，那表示我们可以通过CSS和JS来控制DOM，也可以对每一个DOM元素进行监听，但由于都是DOM元素，所以如果我们修改了SVG中的DOM元素，浏览器就会自动进行DOM重绘
Canvas通过javascript来绘制2D图形（位图），而Canvas只是一个html元素，其中的图形不会单独创建DOM元素，所以我们无法通过Js来操作Canvas内的图形，也无法监听具体图形
WebGL 用于3D展示、动画、游戏，说白了就是基于Canvas的3D框架
Canvas、SVG适用场景
Canvas 适用于位图，高数据量绘制频率的场景，小游戏，小特效，绘制图表、活动页面、炫酷背景
SVG 适用于矢量图，低数据量绘制频率的场景，如图形图表
HTML—鼠标移入或移出表格，表格变色
本文积累了几种鼠标移入或者移出html的table表格时，表格背景色变化的几种方法。
一、利用样式CSS表达式
在样式里写表达式expression，实现鼠标经过表格行上变色，但在firefox里无效果。
完整代码如下：
<html>
<head>
<title>在样式里写表达式expression，实现鼠标经过表格行上变色</title>
<style type="text/css">
.tbDatalist
border: 1px solid #007108;
width: 60%;
border-collapse: collapse; /* 边框重叠,cell间没有空隙 */
background-color: #d9ffdc;
.tbDatalist th
border: 1px solid #007108;
background-color: #00a40c;
color: #ffffff;
font-weight: bold;
padding: 4px 12px 4px 12px; /* 上 右下左 */
text-align: center;
.tbDatalist td
border: 1px solid #007108;
text-align: left;
padding: 4px 10px 4px 10px /* 上 右下左 */;
/* 如果去掉tbDatalist tr里的代码，而增加下面的代码。则实现鼠标经过单元格上，此单元格变色
onmouseover:expression(οnmοuseοver=function()this.style.backgroundColor='orange');
onmouseout:expression(οnmοuseοut=function()this.style.backgroundColor='#d9ffdc');
*/
.tbDatalist tr
onmouseover:expression(οnmοuseοver=function()this.style.backgroundColor='#a5e5aa');
onmouseout:expression(οnmοuseοut=function()this.style.backgroundColor='#d9ffdc');
</style>
</head>
<body>
<table class="tbDatalist" summary="list of members in EE Studay" id="oTable">
<tr>
<th scope="col">姓名</th>
<th scope="col">班级</th>
<th scope="col">出生日期</th>
<th scope="col">星座</th>
<th scope="col">电话</th>
</tr>
<tr>
<td>slepox</td>
<td> W19</td>
<td>Nov 18th</td>
<td>Scorpio</td>
<td>0658635</td>
</tr>
<tr>
<td>smartlau</td>
<td>W19</td>
<td>Dec 30th</td>
<td>Capricorn</td>
<td>0006621</td>
</tr>
</table>
</body>
</html>二、利用jquery的hover(fun,fun)方法
利用jquery的hover(fun,fun)方法，实现鼠标经过表格行上变色，hover()方法有两个参数，第一个参数为鼠标移到某行上要执行的方法，相当于onmouseover()，第2个事参数是鼠标离开某行后要执行的方法，相当于onmouseout()。
完整代码如下：（jquery-1.4.1-vsdoc.js）为VS.NET2010自带的JQuery包
<html>
<head>
<title>利用jquery的hover(fun,fun)方法，实现鼠标经过表格行上变色</title>
<script src="../Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<style type="text/css">
.tbDatalist
border: 1px solid #007108;
width: 60%;
border-collapse: collapse; /* 边框重叠,cell间没有空隙 */
background-color: #d9ffdc;
.tbDatalist th
border: 1px solid #007108;
background-color: #00a40c;
color: #ffffff;
font-weight: bold;
padding: 4px 12px 4px 12px; /* 上 右下左 */
text-align: center;
.tbDatalist td
border: 1px solid #007108;
text-align: left;
padding: 4px 10px 4px 10px /* 上 右下左 */;
.tbDatalist tr.altrow
background-color: #a5e5aa;
</style>
<script type="text/javascript">
$(document).ready(function()
$("tr").hover(
function()
$(this).css("background", "#a5e5aa"); //鼠标移动上去的颜色
,
function()
$(this).css("background", "#d9ffdc"); //鼠标离开的颜色
);
);
</script>
</head>
<body>
<table class="tbDatalist" summary="list of members in EE Studay" id="oTable">
<tr>
<th scope="col">姓名</th>
<th scope="col">班级</th>
<th scope="col">出生日期</th>
<th scope="col">星座</th>
<th scope="col">电话</th>
</tr>
<tr>
<td>slepox</td>
<td> W19</td>
<td>Nov 18th</td>
<td>Scorpio</td>
<td>0658635</td>
</tr>
<tr>
<td>smartlau</td>
<td>W19</td>
<td>Dec 30th</td>
<td>Capricorn</td>
<td>0006621</td>
</tr>
</table>
</body>
</html>三、利用JS的onmouseover()方法和onmouseout()方法
利用JS的onmouseover()方法和onmouseout()方法，实现鼠标移动表格行上变色。
完整代码如下：
<html>
<head>
<title>利用JS，实现鼠标移动表格行上变色</title>
<style type="text/css">
.tbDatalist
border: 1px solid #007108;
width: 500;
border-collapse: collapse; /* 边框重叠,cell间没有空隙 */
background-color: #d9ffdc;
.tbDatalist th
border: 1px solid #007108;
background-color: #00a40c;
color: #ffffff;
font-weight: bold;
padding: 4px 12px 4px 12px; /* 上 右下左 */
text-align: center;
.tbDatalist td
border: 1px solid #007108;
text-align: left;
padding: 4px 10px 4px 10px /* 上 右下左 */;
</style>
<script type="text/javascript">
window.onload = function showTable()
var tablename = document.getElementById("oTable");
var oRows = tablename.getElementsByTagName("tr");
for (var i = 0; i < oRows.length; i++)
oRows[i].onmouseover = function()
this.style.backgroundColor = "#a5e5aa";
oRows[i].onmouseout = function()
this.style.backgroundColor = "#d9ffdc";
</script>
</head>
<body>
<table class="tbDatalist" summary="list of members in EE Studay" id="oTable">
<tr>
<th scope="col">姓名</th>
<th scope="col">班级</th>
<th scope="col">出生日期</th>
<th scope="col">星座</th>
<th scope="col">电话</th>
</tr>
<tr>
<td>slepox</td>
<td> W19</td>
<td>Nov 18th</td>
<td>Scorpio</td>
<td>0658635</td>
</tr>
<tr>
<td>smartlau</td>
<td>W19</td>
<td>Dec 30th</td>
<td>Capricorn</td>
<td>0006621</td>
</tr>
</table>
</body>
</html>
以上是关于canvas一段背景色鼠标移入后的主要内容，如果未能解决你的问题，请参考以下文章