滑鼠懸浮圖片出現文字說明效果

admin發表於2019-01-25

眾多網站有這樣類似效果，滑鼠懸浮圖片上的時候，出現一些文字說明，不但能夠增加網站美觀度，也能夠給使用者提供一定的資訊。是提高網站體驗度的一種良好方式。實現此效果的方式有多種，例如可以使用純CSS方式實現，也可以使用jQuery實現，下面介紹一下如何使用原生JavaScript實現。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css"> 
.main{ 
  width:738px; 
  height:280px; 
  margin:0px auto; 
  border:5px solid #696; 
  position:relative; 
} 
a{text-decoration:none} 
.main .cite{ 
  width:738px; 
  position:absolute; 
  bottom:0px; 
  left:0px; 
  text-align:center;  
  opacity:0.5;    
  background:#333; 
  border-bottom:2px solid #000; 
  border-top:2px solid #000; 
  color:white; 
  overflow:hidden; 
  display:none; 
}   
.main .word{ 
  position:absolute; 
  height:0px; 
  width:738px; 
  text-align:center; 
  bottom:0px; 
  left:0px; 
  color:white; 
  display:block; 
  overflow:hidden; 
} 
</style> 
<script type="text/javascript"> 
var speed=10; 
var citeH=0; 
var flag; 
window.onload=function(){ 
  var cite=document.getElementById("cite"); 
  var word=document.getElementById("word"); 
  var main=document.getElementById("main"); 
   
  function addHeight(){ 
    clearInterval(flag); 
    cite.style.display="block"; 
    if(citeH<86){ 
      citeH=citeH+1; 
      cite.style.height=citeH+"px"; 
      word.style.height=citeH+"px"; 
    } 
    else{ 
      clearInterval(flag); 
      return; 
    } 
    flag=setInterval(addHeight,speed); 
  } 
   
  function reduceHeight(){ 
    clearInterval(flag); 
    if(citeH>0){ 
      citeH=citeH-1; 
      cite.style.height=citeH+"px"; 
      word.style.height=citeH+"px"; 
    } 
    else{ 
      clearInterval(flag); 
      cite.style.display="none"; 
      return; 
    }  
    flag=setInterval(reduceHeight,speed);  
  } 
   
  if(main.addEventListener){ 
    main.addEventListener("mouseover",addHeight,false); 
    main.addEventListener("mouseout",reduceHeight,false); 
  } 
  else{ 
    main.attachEvent("onmouseover",addHeight); 
    main.attachEvent("onmouseout",reduceHeight); 
  } 
} 
</script> 
</head> 
<body> 
<div class="main" id="main">  
<a href="#"> 
  <img src="mytest/demo/cite.jpg" border="0"> 
  <div class="cite" id="cite"></div> 
  <div class="word" id="word">愛護大自然，共享自然風光</div> 
</a> 
</div> 
</body> 
</html>

滑鼠懸浮圖片上的時候出現平滑的出現文字簡介，當滑鼠離開的時候，文字簡介也能夠平滑的離開。

一.程式碼註釋:

（1）.var speed=10，設定文字簡介顯示和隱藏的速度。

（2）.var citeH=0，宣告一個變數，以下程式碼中會有應用。

（3）.var flag，宣告一個變數，用來儲存定時器函式setInterval返回標識值。

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

（5）.var cite=document.getElementById("cite")，獲取id為cite的物件。

（6）.var word=document.getElementById("word")，獲取id為word的物件。

（7）.var main=document.getElementById("main")，獲取id為main的物件。

（8）.function addHeight(){}，函式實現瞭如何平滑的顯示word元素和cite元素。

（9）.clearInterval(flag)，當word元素和cite元素正在進行平滑的隱藏時，滑鼠移到main元素上時，可以停止定時器函式的執行。

（10）.cite.style.display="block"，將cite元素設定為可見；之所以將cite元素預設狀態下設定為隱藏，因為它具有邊框，否則在預設狀態下也會顯示邊框。

（11）.if(citeH<86){}，當值小於86時，cite元素和word元素的高度將不斷被增加，否則將進入else語句，使用clearInterval(flag)停止定期函式的執行，並使用return語句跳出函式。

（12）.citeH=citeH+1，每執行一次，citeH值加1。

（13）.cite.style.height=citeH+"px"，設定cite元素的高度。

（14）.word.style.height=citeH+"px"，設定word元素的高度。

（15）.flag=setInterval(addHeight,speed)，不斷呼叫addHeight函式。

（16）.reduceHeight()函式和addHeight()函式大同小異，這裡就不介紹了。

（17）.if(main.addEventListener){}，判斷瀏覽器是否支援addEventListener方法，如果支援則使用addEventListener方法註冊事件處理函式，否則使用attachEvent方法註冊事件處理函式 。

二.相關閱讀:

（1）.document.getElementById()參閱document.getElementById()一章節。

（2）.clearInterval()參閱JavaScript clearInterval()一章節。

（3）.setInterval()參閱JavaScript setInterval()一章節。

（4）.addEventListener()參閱JavaScript addEventListener()一章節。

相關文章