滑鼠懸浮或者選中實現當前元素凹凸視覺效果

antzone發表於2017-04-02
視覺

在實際應用中有一種比較美觀實用的效果，那就是當滑鼠懸浮或者點選的時候能夠實現當前的元素具有視覺上的凹凸效果，非常的人性化，能夠有效的提高當前元素的辨識度，下面就通過程式碼例項介紹一下如何實現此效果。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
td {
  cursor:hand;
  font-size:12px
}
.click{
  border-top:1px solid #0033CC;
  border-bottom:1px solid #DDEEFF;
  border-left:1px solid #0033CC;
  border-right:1px solid #DDEEFF;
  padding-top:5px;
  padding-bottom:3px;
  padding-left:5px;
  padding-right:3px;
}
.hover{
  border-top:1px solid #DDEEFF;
  border-bottom:1px solid #0033CC;
  border-left:1px solid #DDEEFF;
  border-right:1px solid #0033CC;
  padding:4px;
}
.normal{
  border:1px solid #FFFFFF;
  padding:4px;
}
</style>
</head>
<body>
<script>
function overbutton(ev){
  var ev=window.event||ev;
  if(this.className=="normal"){
    this.className='hover';
  } 
}
function outbutton(ev){
  var ev=window.event||ev;
  if(this.className=="hover"){
    this.className='normal';
  }
}
function clickbutton(ev){
  var ev=window.event||ev;
  var cells=box.rows[0].cells;
  for (var index=0;index<cells.length ;index++ ){
    cells[index].className="normal";
  }
  this.className='click';
}
window.onload=function(){
  var obox=document.getElementById("box");
  var tds=obox.getElementsByTagName("td");
  for(var index=0;index<tds.length;index++){
    tds[index].onmouseover=overbutton;
    tds[index].onmouseout=outbutton;
    tds[index].onclick=clickbutton;
  }
}
</script>
<table id="box">
  <tr>
    <td class="click">日報</td>
    <td class="normal">週報</td>
    <td class="normal">月報</td>
    <td class="normal">季報</td>
    <td class="normal">日報</td>
    <td class="normal">週報</td>
    <td class="normal">月報</td>
    <td class="normal">季報</td>
  </tr>
</table>
</body>
</html>

上面的程式碼實現了我們的要求，之所以在視覺上有凹凸效果其實就是採用邊框設定形成的。

一.程式碼註釋:

（1）.function overbutton(ev){}，onmouseover事件處理函式，引數是事件物件。

（2）.var ev=window.event||ev，相容所有瀏覽器的事件物件。

（3）.if(this.className=="normal"){

  this.className='hover';

} ,判斷元素是className屬性值是否為normal,也就是預設狀態，然後將其class屬性值設定為hover。

（4）.function clickbutton(ev){}，onclick事件處理函式。

（5）.var ev=window.event||ev,相容所有瀏覽器的事件物件。

（6）.var cells=box.rows[0].cells，獲取第一行的所有td單元格集合，id屬性值可以用作物件。

（7）.for (var index=0;index<cells.length ;index++ ){

  cells[index].className="normal";

}，遍歷每一個td單元格，然後將所有的單元格的樣式統一設定為預設樣式。

（8）.this.className='click'，設定當前單元格的class樣式值為click。

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

（10）.var obox=document.getElementById("box"),獲取id屬性值為box的元素物件。

（11）.var tds=obox.getElementsByTagName("td")，獲取obox元素下所有的td元素集合。

（12）.for(var index=0;index<tds.length;index++){

  tds[index].onmouseover=overbutton;

  tds[index].onmouseout=outbutton;

  tds[index].onclick=clickbutton;

}，批量註冊事件處理函式。

二.相關閱讀:

（1）.var ev=window.event||ev可以參閱var ev=window.event||ev的作用是什麼一章節。

（2）.className屬性可以參閱javascript className一章節。

（3）.rows可以參閱js  rows一章節。

（4）.cells可以參閱javascript cells一章節。

（5）.this可以參閱javascript this一章節。

相關文章