jquery implémente un code de couche contextuelle de type Sina Weibo avec des effets animés (peut être fermé et glissé)-js tutoriel-php.cn

jquery implémente un code de couche contextuelle de type Sina Weibo avec des effets animés (peut être fermé et glissé)

PHPz

Libérer： 2018-09-28 17:20:50

avant

1643 Les gens l'ont consulté

Cet article présente principalement le code de jQuery pour implémenter une couche contextuelle imitant Sina Weibo avec des effets animés. Il a les fonctions de fermeture et de glissement. Il implique la réponse de jQuery aux événements de la souris et la fonction de transformation des attributs des éléments de page. Il a une certaine référence. Pour valeur de référence, les amis qui en ont besoin peuvent s'y référer, les détails sont les suivants :

Il s'agit d'une implémentation jquery d'une couche contextuelle avec animation. Elle a été initialement conçue pour simuler le. couche contextuelle dans Sina Weibo. Plus tard, jQuery a été introduit et je voulais Après avoir réfléchi pendant un moment, je ne savais pas comment ajouter un effet d'animation, puis j'ai écrit un tel effet de couche de page Web contextuelle. Après avoir cliqué sur le bouton, vous pouvez voir un calque contextuel qui apparaît progressivement et peut être fermé. Après avoir cliqué pour fermer, bien sûr, il disparaîtra également progressivement lors du déplacement, la position absolue du coin supérieur gauche du contrôle. est calculé en fonction de la position de la souris. Après avoir relâché la souris, elle cesse de bouger et revient à l'opacité.

Une capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démonstration en ligne est la suivante :

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

Le code spécifique est le suivant :

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

Copier après la connexion

Ce qui précède représente l'intégralité du contenu de ce chapitre. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo jQuery !