js實現滑鼠懸浮將當前內容寫入其他元素

螞蟻小編發表於2017-03-16
JS

在很多實際應用中，當滑鼠滑過某些元素的時候，能夠將相關元素的資訊寫入某一個地方，例如一些日曆就有此功能，當滑鼠滑過日期的時候，能夠將相關的日期資訊寫入指定的位置，下面就通過例項簡單介紹一下如何實現此效果。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#backcolor {
  width:400px;
  height:400px;
  background:#FFFF00;
  text-align:center;
  border:ridge 30pt red;
  margin:auto;
}
td {
  border:ridge 3pt red;
  width:100px;
  height:100px;
}
div {
  width:auto;
  height:100px;
  text-align:center;
  line-height:100px;
}
</style>
<script type="text/javascript">
window.onload=function() {
  var divArry=document.getElementsByName('divname');
  var divto=document.getElementById('div12');
  var arry=['春節','情人節','不知道有什麼節日！','清明節','勞動節','兒童節','好像這個月沒有什麼重大的節日吧！','建軍節','教師節','國慶節','光棍節','聖誕節'];
  for(var i=0;i<divArry.length;i++) {
    divArry[i].index = i;
    divArry[i].onmouseover=function() {
      for(var i=0;i<divArry.length;i++) 
      {
        divArry[i].style.background='';
      }
      this.style.background='red';
      divto.innerHTML = '<h3>' + this.innerHTML + arry[this.index] + '</h3>';
    }
  }
};
</script>
</head>
<body>
<table id="backcolor">
  <tr>
    <td><div id="div0" name="divname"> 一月 </div></td>
    <td><div id="div1" name="divname"> 二月 </div></td>
    <td><div id="div2" name="divname"> 三月 </div></td>
    <td><div id="div3" name="divname"> 四月 </div></td>
  </tr>
  <tr>
    <td><div id="div4" name="divname"> 五月 </div></td>
    <td><div id="div5" name="divname"> 六月 </div></td>
    <td><div id="div6" name="divname"> 七月 </div></td>
    <td><div id="div7" name="divname"> 八月 </div></td>
  </tr>
  <tr>
    <td><div id="div8" name="divname"> 九月 </div></td>
    <td><div id="div9" name="divname"> 十月 </div></td>
    <td><div id="div10" name="divname"> 十一月 </div></td>
    <td><div id="div11" name="divname"> 十二月 </div></td>
  </tr>
  <tr>
    <td colspan="4"><div id="div12" style="width: 400px;"> </div></td>
  </tr>
</table>
</body>
</html>

以上程式碼，當滑鼠滑過相應的日期的時候，能夠將相應日期的相關資訊寫入底部，下面就介紹一下它的實現過程。

一.實現原理:

本效果的原理非常的簡單，就死將月份和一個陣列相結合起來，陣列中存放的就是月份的相關資訊。通過for迴圈為每一個div元素註冊onmouseover事件處理函式，並且會將當前div在divArry集合中的索引值賦值給當前div的自定義屬性index，當滑鼠放在div的時候，能夠將當前div的index屬性值作為陣列的索引，然後將相應的陣列元素值寫入divto。

二.程式碼註釋:

1.window.onload=function(){}，當文件內容完全載入完畢再去執行函式中的程式碼。

2.var divArry=document.getElementsByName('divname')，根據name屬性獲取物件集合。

3.var divto=document.getElementById('div12')，獲取div的div物件。

4.var arry=['春節','情人節','不知道有什麼節日！','清明節','勞動節','兒童節','好像這個月沒有什麼重大的節日吧！','建軍節','教師節','國慶節','光棍節','聖誕節']，建立一個陣列，陣列中的元素就是相關月份的資訊。

5.for(var i=0;i<divArry.length;i++) {}，使用for迴圈來遍歷每一個集合中的元素。

6.divArry.index=i，將當前元素在集合中的索引賦值給當前div元素的自定義屬性index。

7. divArry.onmouseover=function() {}給每一個div元素註冊事件處理函式。

8.for(var i=0;i<divArry.length;i++) {divArry.style.background=''}，遍歷每一個div元素，然後將style定義的背景色刪除，如果沒有這一步，那麼所以的日期背景都會挨個變紅色。

9.this.style.background='red'，將當前的div的背景設定為紅色

10.divto.innerHTML = '<h3>' + this.innerHTML + arry[this.index] + '</h3>'，將相應的內容寫入底部div。

相關文章