Javaweb 鼠標(biāo)移入移出表格顏色變化的實(shí)現(xiàn)

更新時(shí)間：2020年09月11日 09:33:47 作者：灰小猿

這篇文章主要介紹了Javaweb 鼠標(biāo)移入移出表格顏色變化的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

最近在學(xué)習(xí)JavaWeb時(shí)，有用到鼠標(biāo)移動(dòng)事件，所以今天在這里記錄一個(gè)相關(guān)的案例，同時(shí)也是對(duì)相關(guān)知識(shí)的一個(gè)鞏固，效果為在鼠標(biāo)移動(dòng)到表格對(duì)應(yīng)行列時(shí)，該行列的背景顏色發(fā)生變化。

效果如下：

其中用到是onmouseover和onmouseou事件t，同時(shí)還有一個(gè)作用相似的事件叫做onmousemove，所以在這里先對(duì)這三種鼠標(biāo)事件做一個(gè)簡(jiǎn)單的對(duì)比：

在時(shí)間上：如果兩個(gè)事件同時(shí)存在，先是onmousemove事件觸發(fā)后，才會(huì)觸發(fā)onmouseover事件。
在按鈕上：onmousemove和onmouseover都不區(qū)分鼠標(biāo)按鈕
在動(dòng)作上：onmouseover是在鼠標(biāo)剛移入?yún)^(qū)域的時(shí)候觸發(fā)，onmousemove是除了鼠標(biāo)移入?yún)^(qū)域時(shí)觸發(fā)外，鼠標(biāo)在區(qū)域內(nèi)移動(dòng)同樣也會(huì)觸發(fā)事件。
兩者區(qū)別：當(dāng)鼠標(biāo)移過(guò)當(dāng)前對(duì)象區(qū)域時(shí)就產(chǎn)生了onmouseover事件，所以onmouseover事件有個(gè)移入移出的過(guò)程,當(dāng)鼠標(biāo)在當(dāng)前對(duì)象區(qū)域上移動(dòng)時(shí)就產(chǎn)生了onmousemove事件，只要是在對(duì)象上移動(dòng)而且沒(méi)有移出對(duì)象的，那么就是onmousemove事件。

onmouseout事件則是在鼠標(biāo)移出對(duì)象區(qū)域時(shí)觸發(fā)。

搞懂這三者之間的關(guān)系，在進(jìn)行鼠標(biāo)經(jīng)過(guò)事件的處理時(shí)只需使用對(duì)應(yīng)的事件觸發(fā)即可：

接下來(lái)是對(duì)上述事件和效果的代碼：

Jsp部分代碼：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <base href="<%=basePath%>" rel="external nofollow" >
  
  <title>表格顏色變化</title>
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">  
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">
 <!--
 <link rel="stylesheet" type="text/css" href="styles.css" rel="external nofollow" >
 -->
 <script type="text/javascript" src="index.js"></script>
 </head>
 
 <body>
  <table width = "200" border = "1" align = "center" cellpadding="1" cellspacing="5">
  <tr id = "t0"><th>學(xué)校</th><th>專業(yè)</th><th>人數(shù)</th></tr>
  <tr id = "t1"><th>濟(jì)大</th><th>軟件</th><th>2000</th></tr>
 <tr id = "t2"><th>北大</th><th>機(jī)械</th><th>3000</th></tr>
 <tr id = "t3"><th>浙大</th><th>生物</th><th>4000</th></tr>
 
  </table>
 </body>
</html>

Js部分代碼：

onload = function() {
 var t0 = document.getElementById("t0");
 var t1 = document.getElementById("t1");
 var t2 = document.getElementById("t2");
 var t3 = document.getElementById("t3");

 t0.onmouseover = function () {
   t0.style.backgroundColor = "green";
  }
 t0.onmouseout = function () {
   t0.style.backgroundColor = "white";
  }
 t1.onmouseover = function () {
   t1.style.backgroundColor = "red";
  }
 t1.onmouseout = function () {
   t1.style.backgroundColor = "white";
  }
 t2.onmouseover = function () {
   t2.style.backgroundColor = "red";
  }
 t2.onmouseout = function () {
   t2.style.backgroundColor = "white";
  }
 t3.onmouseover = function () {
   t3.style.backgroundColor = "red";
  }
 t3.onmouseout = function () {
   t3.style.backgroundColor = "white";
  }
}

到此這篇關(guān)于Javaweb 鼠標(biāo)移入移出表格顏色變化的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Javaweb 鼠標(biāo)移入移出表格內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: