jquery menyedari kesan mengklik pada lapisan pop timbul dengan bar tajuk (terbang masuk dari sudut kanan atas)

jquery menyedari kesan mengklik pada lapisan pop timbul dengan bar tajuk (terbang masuk dari sudut kanan atas)_jquery

WBOY

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

asal

1622 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara jquery boleh mencapai kesan mengklik pada lapisan pop timbul dengan bar tajuk (terbang masuk dari sudut kanan atas). Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ini ialah lapisan pop timbul yang dilaksanakan oleh jquery Selepas mengklik pada teks, ia akan terbang masuk dari sudut kanan atas halaman web, yang juga boleh dikatakan sedang meluncur masuk. Jenis pop timbul ini. kotak mempunyai butang tutup, dan bar tajuk serta kandungan dan gaya kotak timbul boleh disesuaikan Anda boleh menentukannya sendiri, kodnya ringkas, dan ia dilaksanakan berdasarkan jquery digunakan di luar kotak.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

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

Kod khusus adalah seperti berikut:

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

Salin selepas log masuk

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.