So entdecken Sie versteckte Elemente in Leerstellen-js-Tutorial-php.cn

So entdecken Sie versteckte Elemente in Leerstellen

php中世界最好的语言

Freigeben： 2018-03-15 16:08:55

Original

1455 Leute haben es durchsucht

Dieses Mal werde ich Ihnen zeigen, wie Sie die verborgenen Elemente in der Leerstelle entdecken und welche Vorsichtsmaßnahmen es gibt, um die verborgenen Elemente in der Leerstelle zu entdecken. Das Folgende ist ein praktischer Fall, nehmen wir einen sehen.

Wenn wir Websites entwickeln, klicken wir oft auf die Leerstelle, um vorhandene Elemente, p oder andere Elemente auszublenden. Dieses Mal werde ich Ihnen beibringen, wie Sie mit jquery diesen besonderen Effekt erzielen.

Klicken Sie in jQuery auf die Leerstelle, um den Spezialeffekt der Popup-Ebene auf der Webseite auszublenden. Klicken Sie auf die Schaltfläche, um die Ebene einzublenden. Klicken Sie auf die Leerstelle auf der Seite, um die JS-Popup-Ebene auszublenden Code. Die Hauptfunktion besteht darin, auf die Schaltfläche zu klicken, um die Popup-Ebene anzuzeigen, und dann auf eine beliebige Stelle auf der Seite zu klicken, um den Anzeigeeffekt der Popup-Ebene zu schließen. Dies ist hauptsächlich die Operationsanwendung von $ (document).click. Demo, Effekt-Quellcode:

CSS-Code:

* { 
  padding: 0; 
	margin: 0; 
}
#btnShow{ 
  margin: 100px auto 0; 
	width: 90px; 
	display: block; 
}
#pTop{ 
  border: 2px solid #666666; 
	position: absolute; display: none; 
	width: 400px; 
	height: 200px; 
	color: #333; 
	background: #efefef; 
	padding-top: 10px; 
	text-align: center; 
	font: 16px/30px "微软雅黑"; 
	margin-top: -105px; 
	margin-left: -200px; 
	left: 50%; 
	top: 50%;
 }

Nach dem Login kopieren

JS-Code:

 $(function () { 
   $('#btnShow').click(function (event) { 
     //取消事件冒泡 
     event.stopPropagation(); 
     //按钮的toggle,如果p是可见的,点击按钮切换为隐藏的;如果是隐藏的,切换为可见的。 
     $('#pTop').toggle('slow'); 
		 return false;
   }); 
   //点击空白处隐藏弹出层，下面为滑动消失效果和淡出消失效果。
	 $(document).click(function(event){
		 var _con = $('#pTop');  // 设置目标区域
		 if(!_con.is(event.target) && _con.has(event.target).length === 0){ // Mark 1
			//$('#pTop').slideUp('slow');  //滑动消失
			$('#pTop').hide(1000);     //淡出消失
		 }
	});
 })

Nach dem Login kopieren

HTML-Code:

<body>
<input type="button" id="btnShow" value="弹出框按钮" />
<p id="pTop">
 点击空白区域弹出层关闭！
</p>
</body>

Nach dem Login kopieren

Klicken Sie nach dem Testen auf dem mobilen iPhone auf die leere Stelle der Seite um die Popup-Ebene zu schließen. Ungültig, das Schreiben von Dokumenten wird nicht unterstützt. Lösung: Sie können eine Hintergrundebene als leeres Seitenobjekt hinzufügen.

Klicken Sie auf die leere Stelle, um die Popup-Ebene auszublenden. Fall 2:

<!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">
#box{width:300px;height:200px;border:1px solid #000;display:none;}
.btn{color:red;}
</style>
<script type="text/javascript" src="http://www.internetke.com/public/js/jquery.js"></script>
<script type="text/javascript">
$(function(){
  $(".btn").click(function(event){
    var e=window.event || event;
    if(e.stopPropagation){
      e.stopPropagation();
    }else{
      e.cancelBubble = true;
    }  
    $("#box").show();
  });
  $("#box").click(function(event){
    var e=window.event || event;
    if(e.stopPropagation){
      e.stopPropagation();
    }else{
      e.cancelBubble = true;
    }
  });
  document.onclick = function(){
    $("#box").hide();
  };
})
</script>
</head>
<body>
<p id="box"></p>
<span class="btn">点击此处打开弹出层</span><br>点击空白处关闭弹出层
</body>
</html>

Nach dem Login kopieren

Ich möchte Ihnen den Code der Methode zum Ausblenden des p-Bereichs durch Klicken außerhalb mitteilen der p-Bereich in js:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js" ></script>
<title></title>
</head>
<style type="text/css">
body
{
background-color:#999999;
} 
#myp
{
background-color:#FFFFFF;
width:250px;
height:250px;
display:none;
　　　　　　}
　　</style>
<body>
<input id="btn" type="button" value="显示p" />
 
<p id="myp">
This is a p;
</p> 
</body> 
<script type="text/javascript">
　　　　var myp = $("#myp");
$(function ()
{
$("#btn").click(function (event) 
{
showp();//调用显示p方法
$(document).one("click", function () 
{//对document绑定一个影藏p方法
$(myp).hide();
}); 
event.stopPropagation();//阻止事件向上冒泡
});
$(myp).click(function (event) 
{
event.stopPropagation();//阻止事件向上冒泡
});
});
　　　　function showp() 
{
$(myp).fadeIn();
}
</script>

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie jQuery dynamische Seitenelemente steuert

Wie zwei zTree miteinander interagieren

Wie überprüft das Validate-Plug-in von jQuery den Eingabewert?

Was tun, wenn nach der Ajax-Anfrage keine Reflexion erfolgt? Hintergrunddaten sind erfolgreich

Das obige ist der detaillierte Inhalt vonSo entdecken Sie versteckte Elemente in Leerstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!