jquery melaksanakan kod lapisan pop timbul seperti Sina Weibo dengan kesan animasi (boleh ditutup dan diseret)-tutorial js-php.cn

jquery melaksanakan kod lapisan pop timbul seperti Sina Weibo dengan kesan animasi (boleh ditutup dan diseret)

PHPz

Lepaskan： 2018-09-28 17:20:50

ke hadapan

1733 orang telah melayarinya

Artikel ini terutamanya memperkenalkan kod jQuery untuk melaksanakan lapisan pop timbul meniru Sina Weibo dengan kesan animasi Ia mempunyai fungsi menutup dan menyeret Ia melibatkan tindak balas jQuery kepada peristiwa tetikus dan fungsi transformasi atribut elemen halaman. Ia mempunyai rujukan tertentu Untuk nilai rujukan, rakan-rakan yang memerlukannya boleh merujuk kepadanya, butirannya adalah seperti berikut:

Ini adalah pelaksanaan jquery lapisan pop timbul dengan animasi. Ia pada asalnya direka untuk mensimulasikan lapisan pop timbul dalam Sina Weibo Kemudian, jQuery telah diperkenalkan, dan saya mahu Selepas berfikir sebentar, saya tidak tahu bagaimana untuk menambah beberapa kesan animasi, dan kemudian saya menulis kesan lapisan halaman web pop timbul. Selepas anda mengklik butang, anda boleh melihat lapisan pop timbul yang secara beransur-ansur muncul dan boleh ditutup Selepas mengklik untuk menutup, sudah tentu, ia juga akan hilang secara beransur-ansur Apabila bergerak, kedudukan mutlak sudut kiri atas kawalan dikira berdasarkan kedudukan tetikus Selepas melepaskan tetikus, ia berhenti bergerak dan kembali kepada kelegapan.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

http: //demo.jb51.net/ js/2015/jquery-f-sina-flash-style-close-able-dlg-demo/

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<style type="text/css">
#t{ margin:30px 0 0 100px;}
.cc {
  border:1px solid #000;
  position:absolute;
  top:60px;
  left:180px;
  height: 150px;
  width: 300px;
  display:none;
}
.cc h2{ display:block; width:270px; font-size:12px; float:left; text-align:center;}
.cc span{ display:block; width:20px; height:20px; font-size:18px; float:right; border:1px solid #F00; background:#999; text-align:center;}
</style>
<script language="javascript">
$(function(){
  var _move=false;//移动标记
  var _x,_y;//鼠标离控件左上角的相对位置
  $(&#39;#t&#39;).click(
    function(){
    $(&#39;.cc&#39;).fadeIn(&#39;slow&#39;);
      });
  $(&#39;.cc span&#39;).click(function(){
      $(&#39;.cc&#39;).hide(&#39;fast&#39;);
      })
  $(&#39;.cc&#39;).mousedown(function(e){
    _move=true;
  _x=e.pageX-parseInt($(".cc").css("left"));
  _y=e.pageY-parseInt($(".cc").css("top"));
  $(".cc").fadeTo(20, 0.5).css(&#39;cursor&#39;,&#39;move&#39;);//点击后开始拖动并透明显示
    });
   $(&#39;.cc&#39;).mousemove(function(e){
  if(_move){
   var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
   var y=e.pageY-_y;
   $(".cc").css({top:y,left:x});//控件新位置
  }
 }).mouseup(function(){
 _move=false;
 $(".cc").fadeTo("fast", 1).css(&#39;cursor&#39;,&#39;auto&#39;);//松开鼠标后停止移动并恢复成不透明
 });
});
</script>
<title>新浪微博的弹出层效果</title>
</head>
<body>
<input id="t" name="1" type="button" value="弹出层" />
<p class="cc"><h2>点击可以拖拽哦</h2><span>X</span></p>
</body>
</html>

Salin selepas log masuk

Di atas adalah keseluruhan kandungan bab ini , untuk lebih banyak tutorial berkaitan, sila lawati Tutorial Video jQuery!