Maison > Article > interface Web > JS implémente l'effet de boîte d'invite de texte de lien qui suit la souris

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

PHPzoriginal: 2016-05-16 15:46:411154parcourir

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>

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 !

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Résumé de l'utilisation de la classe de chaîne dans les compétences C_javascriptArticle suivant：Résumé de l'utilisation de la classe de chaîne dans les compétences C_javascript

Articles Liés

Voir plus