Code example of how to implement delayed display prompt box effect in javascript-JS Tutorial-php.cn

Code example of how to implement delayed display prompt box effect in javascript

黄舟

Release： 2017-06-04 10:37:29

Original

1475 people have browsed it

This article mainly introduces in detail the javascript implementation of the delay display prompt box effect, which has a certain reference value. Interested friends can refer to it

jsDelay prompt box effect demonstration:

Implementation method

Move into display, Move out of hiding

Remove delayed hiding, you can move from the first p to the second p, and still display it

<!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>

Copy after login

The above is the detailed content of Code example of how to implement delayed display prompt box effect in javascript. For more information, please follow other related articles on the PHP Chinese website!