jquery는 애니메이션 효과가 포함된 Sina Weibo와 유사한 팝업 레이어 코드를 구현합니다(닫고 끌 수 있음).-JS 튜토리얼-php.cn

jquery는 애니메이션 효과가 포함된 Sina Weibo와 유사한 팝업 레이어 코드를 구현합니다(닫고 끌 수 있음).

PHPz

풀어 주다： 2018-09-28 17:20:50

앞으로

1672명이 탐색했습니다.

이 글에서는 애니메이션 효과로 Sina Weibo를 모방한 팝업 레이어를 구현하기 위한 jQuery의 코드를 주로 소개합니다. 여기에는 마우스 이벤트에 대한 jQuery의 응답 및 페이지 요소 속성의 변환 기능이 포함됩니다. 특정 참조가 있습니다. 참조 값이 필요한 친구가 참조할 수 있으며 자세한 내용은 다음과 같습니다.

이는 애니메이션이 포함된 팝업 레이어의 jquery 구현입니다. 원래는 애니메이션을 시뮬레이션하기 위해 설계되었습니다. 나중에 jQuery가 소개되었는데, 한동안 고민하다가 애니메이션 효과를 어떻게 추가해야 할지 몰라서 이런 팝업 웹페이지 레이어 효과를 작성하게 되었습니다. 버튼을 클릭하면 점차적으로 나타나고 닫힐 수 있는 팝업 레이어를 볼 수 있습니다. 물론 클릭하여 닫으면 컨트롤의 왼쪽 상단 모서리의 절대 위치도 점차 사라집니다. 마우스 위치를 기준으로 계산되며 마우스를 놓으면 이동이 중지되고 불투명도로 돌아갑니다.

실행 중인 효과의 스크린샷은 다음과 같습니다.

온라인 데모 주소는 다음과 같습니다.

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

구체 코드는 다음과 같습니다.

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

로그인 후 복사

위 내용은 이 장의 전체 내용입니다. 더 많은 관련 튜토리얼을 보려면 jQuery 비디오 튜토리얼을 방문하세요!