javascript模擬實現連結的title效果例項程式碼

antzone發表於2017-03-14
JavaScript

超連結<a>的title屬性的美觀度確實難以令挑剔的客戶滿意，所以有時候我們需要自己設計類似於title的效果，下面是一段能夠實現這種效果的程式碼例項，當然美觀度一般，因為這裡我們們只是用來介紹它的實現原理。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>js實現自定義title功能-螞蟻部落</title>
<style type="text/css">
body ul{list-style: none;}
body li
{
  margin:60px;
  width:150px;
  height:30px;
}
body li a{position:absolute;}
div 
{ 
  border:1px solid #CCC; 
  padding:10px; 
  background:#dff5ff; 
}
</style>
<script type="text/javascript"> 
var newdiv=document.createElement("div"); 
function initEvent() 
{ 
  var links=document.getElementsByTagName("a"); 
  for(var i=0;i<links.length;i++) 
  { 
    var link=links[i]; 
    link.onmousemove=linkOnMouseOver; 
    link.onmouseout=linkOnMouseOut; 
  } 
} 
function linkOnMouseOver(ev) 
{ 
  var ev=ev||window.event;
  newdiv.style.position="absolute"; 
  newdiv.style.top=(20+ev.clientY)+"px"; 
  newdiv.style.left=(20+ev.clientX)+"px"; 
  newdiv.innerHTML=this.innerHTML; 
  document.body.appendChild(newdiv); 
} 
function linkOnMouseOut()
{ 
  document.body.removeChild(newdiv);
} 
window.onload=function(){initEvent()}
</script>
</head>
<body>
<ul>
  <li><a href="#">螞蟻部落一</a></li>
  <li><a href="#">螞蟻部落二</a></li>
  <li><a href="#">螞蟻部落三</a></li>
</ul>
</body>
</html>

以上程式碼實現了自定義的title效果，下面就簡單介紹一下本效果的實現過程。

一.實現原理:

1.自定義彈出視窗的來源:

在程式碼開頭動態建立一個div元素，這個就用來作為彈出的提示視窗。

2.如何定位：

將div的top和left屬性值分別設定為clientX+20和clientY+20，也就是滑鼠在當前可見文件區座標加上20，之所以加20就是為了讓滑鼠指標和彈出視窗之間有一段距離。

3.如何實現跟隨效果:

為連結註冊onmousemove事件處理函式，這樣滑鼠移動的時候，不斷設定div的座標，就是先了跟隨效果。

4.如何隱藏此div：

當滑鼠離開的時候可以實現刪除此div，因為為連結註冊了onmouseout事件處理函式，此函式可以刪除div元素。

二.相關閱讀:

1.createElement()可以參閱js createElement()一章節。

2.getElementsByTagName()可以參閱document.getElementsByTagName()一章節。 

3.mousemove事件可以參閱javascript mousemove 事件一章節。

4.mouseout事件可以參閱javascript mouseout 事件一章節。

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

6.clientX屬性可以參閱javascript clientX一章節。

7.removeChild()函式可以參閱javascript removeChild()一章節。  

相關文章