JS implémente l'effet de boîte d'invite de texte de lien qui suit la souris-js tutoriel-php.cn

JS implémente l'effet de boîte d'invite de texte de lien qui suit la souris

PHPz

Libérer： 2018-09-29 11:48:08

original

1207 Les gens l'ont consulté

Cet article présente principalement l'implémentation JS de l'effet de boîte d'invite de texte de lien qui suit la souris, impliquant des techniques associées d'événements de souris javascript et d'opérations de style d'élément de page. C'est très simple et pratique. Les amis qui en ont besoin peuvent s'y référer. .Les détails sont les suivants :

JavaScript et CSS sont utilisés ici pour obtenir l'effet d'invite de lien. Il ne modifiera pas la structure de votre lien d'origine. Il est implémenté en utilisant la balise de titre d'origine du lien. la balise de titre avant, il vous suffit presque de copier le code JS pour accéder simplement à votre page Web. Vous constaterez qu'après avoir exécuté cet effet, si la souris se déplace sur le lien, la zone d'invite de texte se déplacera avec la souris.

L'effet de l'opération est illustré dans la figure ci-dessous :

Le code spécifique est le suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>跟随鼠标的文字提示框</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body{font:12px/1.8 arial;}
a,a:visited{color:#3366cc;text-decoration:none;}
a:hover{color:#f60;text-decoration:underline;}
.tip{width:200px;border:2px solid #ddd;padding:8px;background:#f1f1f1;color:#666;}
img{border:none;}
</style>
<script type="text/javascript">
 var tip={$:function(ele){
 if(typeof(ele)=="object")
  return ele;
 else if(typeof(ele)=="string"||typeof(ele)=="number")
  return document.getElementById(ele.toString());
  return null;
 },
 mousePos:function(e){
  var x,y;
  var e = e||window.event;
  return{x:e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft,
y:e.clientY+document.body.scrollTop+document.documentElement.scrollTop};
 },
 start:function(obj){
  var self = this;
  var t = self.$("mjs:tip");
  obj.onmousemove=function(e){
   var mouse = self.mousePos(e);
   t.style.left = mouse.x + 10 + &#39;px&#39;;
   t.style.top = mouse.y + 10 + &#39;px&#39;;
   t.innerHTML = obj.getAttribute("tips");
   t.style.display = &#39;&#39;;
  };
  obj.onmouseout=function(){
   t.style.display = &#39;none&#39;;
  };
 }
 }
</script>
</head>
<body>
<ol>
<li><a href="#" target="_blank" onmouseover="tip.start(this)" tips="2013年12月14日，嫦娥3号卫星登上月球，激动人心的一切终于到来了……">中国嫦娥飞天的一些感想</a></li>
<li><a href="#" target="_blank" onmouseover="tip.start(this)" tips="中国未来一定是世界上最强大的国家，你相信么？">中国是世界上最强大的国家</a></li>
</ol>
<p id="mjs:tip" class="tip" style="position:absolute;left:0;top:0;display:none;"></p>
</body>
</html>

Copier après la connexion

Ce qui précède est l'intégralité du contenu de ce chapitre, plus Pour les didacticiels associés, veuillez visiter le Tutoriel vidéo JavaScript, Tutoriel vidéo CSS !