jquery erkennt den Effekt des Klickens auf die Popup-Ebene mit der Titelleiste (von der oberen rechten Ecke her einfliegend)

jquery erkennt den Effekt des Klickens auf die Popup-Ebene mit der Titelleiste (von der oberen rechten Ecke her einfliegend)_jquery

WBOY

Freigeben： 2016-05-16 15:38:33

Original

1606 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt, wie JQuery den Effekt erzielen kann, wenn man auf eine Popup-Ebene mit einer Titelleiste klickt (die von der oberen rechten Ecke her einfliegt). Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist eine von jquery implementierte Popup-Ebene. Nachdem Sie auf den Text geklickt haben, wird er von der oberen rechten Ecke der Webseite eingeblendet, was auch als Einschieben bezeichnet werden kann. Diese Art von Popup Das Feld verfügt über eine Schaltfläche zum Schließen, und der Inhalt und Stil der Titelleiste und des Popup-Felds kann selbst definiert werden. Der Code ist prägnant und wird basierend auf JQuery implementiert Wird sofort verwendet.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/jquery-fade-in-title-info-stye-alert-codes/

Der spezifische Code lautet wie folgt:

<!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>jQuery从页面右上角弹出的浮层代码</title> 
<style>
*{margin:0;padding:0;list-style-type:none;}
body{font-family:'microsoft yahei';}
a{text-decoration:none;}
.showdiv{color:#fff;padding:8px 15px;background:#09F;text-align:center;display:block;width:150px;margin:100px auto;}
.showbox{width:0px;height:0px;display:none;position:absolute;right:0;top:0;z-index:100;border:1px #8FA4F5 solid;padding:1px;background:#fff;}
.showbox h2{height:25px;font-size:14px;background-color:#3366cc;position:relative;padding-left:10px;line-height:25px;color:#fff;}
.showbox h2 a{position:absolute;right:5px;top:0;font-size:12px;color:#fff;}
.showbox .mainlist{padding:10px;}
.showbox .mainlist p{font:normal 14px/2 'microsoft yahei';text-indent:2em;color:#333;padding-top:5px;}
#zhezhao{background-color:#666;position:absolute;z-index:99;left:0;top:0;display:none;width:100%;height:100%;opacity:0.5;filter: alpha(opacity=50);-moz-opacity: 0.5;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(".showdiv").click(function(){
  var box =300;
  var th= $(window).scrollTop()+$(window).height()/1.6-box;
  var h =document.body.clientHeight;
  var rw =$(window).width()/2-box;
  $(".showbox").animate({top:th,opacity:'show',width:600,height:340,right:rw},500);
  $("#zhezhao").css({
   display:"block",height:$(document).height()
  });
  return false;
 });
 $(".showbox .close").click(function(){
  $(this).parents(".showbox").animate({top:0,opacity: 'hide',width:0,height:0,right:0},500);
  $("#zhezhao").css("display","none");
 });
});
</script>
</head>
<body>
 <a class="showdiv" href="#">点击我弹出浮层</a>
 <div class="showbox">
  <h2>脚本之家简介<a class="close" href="#">关闭</a></h2>
  <div class="mainlist">
   <p>脚本之家是国内专业的网站建设资源、脚本编程学习类网站，提供最新的网络编程、脚本编程、网页制作、网页设计、网页特效，为站长与网络编程从业者提供学习资料。
</p>
  </div>
 </div> 
 <div id="zhezhao"></div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.