자바스크립트에서 지연된 표시 프롬프트 상자 효과를 구현하는 방법에 대한 코드 예
- 黄舟원래의
- 2017-06-04 10:37:291478검색
이 문서에서는 특정 참조 값이 있는 지연된 표시 프롬프트 상자 효과의 javascript 구현을 자세히 소개합니다. 관심 있는 친구는
js지연 프롬프트 상자 효과 데모를 참조할 수 있습니다.
구현 method
디스플레이로 이동, 숨김에서 벗어나기
지연 숨김 제거, 첫 번째 p에서 두 번째 p로 이동해도 여전히 표시됩니다
<!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('p1');
var op2=document.getElementById('p2');
var timer=null;
op1.onmouseover=op2.onmouseover=function()
{
clearTimeout(timer);
op2.style.display='block';
};
op1.onmouseout=op2.onmouseout=function()
{
timer=setTimeout(function()
{
op2.style.display='none';}
,500);
};
};
</script>
<body>
<p id="p1"></p>
<p id="p2"></p>
</body>
</html>위 내용은 자바스크립트에서 지연된 표시 프롬프트 상자 효과를 구현하는 방법에 대한 코드 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.