클릭 팝업 레이어를 구현한 jquery의 간단한 예 effect

클릭 팝업 레이어를 구현한 jquery의 간단한 예 effect_jquery

WBOY

풀어 주다： 2016-05-16 16:57:44

원래의

1221명이 탐색했습니다.

팝업 레이어의 실제 적용에서 우리는 종종 수많은 팝업 레이어 효과를 접하게 되는데, 아래에서는 관심 있는 친구들이 참고할 수 있도록 jquery를 기반으로 한 간단한 팝업 레이어 효과 예제를 만들어 보겠습니다.

효과 코드는 다음과 같습니다.

다음은 팝업 레이어의 핵심코드입니다

코드를 복사하세요 코드는 다음과 같습니다

< ;script type="text/javascript">
//그라디언트 팝업 레이어
$(document).ready(function(){
 var speed = 600;//애니메이션 속도
 $( "#race a").click(function(event){//바인드 이벤트 처리
 event.stopPropagation();
 var offset = $(event.target).offset() ;//이벤트 버블 취소
 $("#racePop").css({ top:offset.top $(event.target).height() "px", left:offset.left });//설정 팝업 레이어 위치
 $("#racePop").show(speed);//애니메이션 표시
 });
 $(document).click(function(event) { $("#racePop ").hide( speed) });//숨기려면 빈 영역을 클릭하세요 
 $("#racePop").click(function(event) { $("#racePop").hide(speed) } );//팝업하면 레이어가 숨겨집니다

});

전체 예시

코드 복사 코드는 다음과 같습니다.

클릭

여기 팝업이 있습니다 레이어 효과

<스타일>
본체{margin:0 auto;font:12px/1.5 tahoma,arial,5b8b4f53;color:#828282;배경:#fff}
본문,h1,h2,h3,h4 ,h5,h6,p,ul,li,dl,dt,dd{padding:0;margin:0;}
li{list-style:none;}img{border:none;}em{font-style :normal;}
a{color:#555;text-꾸밈:none;outline:none;blr:this.onFocus=this.blur();}
a:hover{color:#000;text -장식:밑줄;}
본체{글꼴 크기:12px;글꼴-가족:Arial,Verdana, Helvetica, sans-serif;word-break:break-all;word-wrap:break-word;}
.clear{높이:0;overflow:hidden;clear:both;}

/* 그라데이션 팝업 레이어*/
#race{display:block;width:200px;height:50px;line-height:50px;text-align:center; background:#CCC;border:# 555 1px 솔리드;여백:10px 자동}
.raceShow{배경-색상:#f1f1f1;border:solid 1px #ccc;위치:절대;디스플레이:none;너비:300px;높이:100px;패딩:5px;글꼴 -크기 :12px;}