recherche

Maison >interface Web >js tutoriel >Exemple de code illustrant la façon d'implémenter l'effet de boîte d'invite d'affichage différé en javascript

Exemple de code illustrant la façon d'implémenter l'effet de boîte d'invite d'affichage différé en javascript

黄舟
黄舟original
2017-06-04 10:37:291536parcourir

Cet article présente principalement en détail l'implémentation javascript de l'effet de boîte d'invite d'affichage différé, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

js. Démonstration de l'effet de boîte d'invite de retard :

Méthode de mise en œuvre

Déplacer vers l'affichage, supprimer le
masqué

Supprimez le masquage différé, vous pouvez passer du premier p au deuxième p, et toujours afficher 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
#p1 {
 width: 50px;
 height: 50px;
 background: red;
 float: left
}
#p2 {
 margin-left: 10px;
 width: 250px;
 height: 150px;
 background: yellow;
 float: left;
 display: none
}
</style>
<script>
window.onload=function()
{
 var op1=document.getElementById(&#39;p1&#39;);
 var op2=document.getElementById(&#39;p2&#39;);
 var timer=null;
 op1.onmouseover=op2.onmouseover=function()
 {
 clearTimeout(timer);
 op2.style.display=&#39;block&#39;;
 };
 op1.onmouseout=op2.onmouseout=function()
 {
 timer=setTimeout(function()
 {
  op2.style.display=&#39;none&#39;;}
 ,500); 
 };
};
</script>
<body>
<p id="p1"></p>
<p id="p2"></p>
</body>
</html>


Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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：Exemple de code montrant comment javascript demande au servlet d'implémenter ajaxArticle suivant：Exemple de code montrant comment javascript demande au servlet d'implémenter ajax

Articles Liés

Voir plus