Js_javascript 스킬로 드래그하여 확대할 수 있는 레이어 드래그 효과 구현 방법
- WBOY원래의
- 2016-05-16 16:13:17994검색
본 글의 예시에서는 JS에서 드래그 및 확대가 가능한 레이어 드래그 효과 구현 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다.
코드 복사 코드는 다음과 같습니다.
<스타일>
*{마진:0;패딩:0;}
#zhezhao{
너비:100%;
높이:100%;
배경:#f00;
필터:알파(불투명도:0);
불투명도:0;
Z-색인:9999;
위치:절대;
상단:0;
왼쪽:0;
디스플레이:없음;
}
#div2{
너비:200px;
높이:200px;
위치:상대;
배경:#EEEEEE;
테두리:1px 솔리드 #f00;
}
#div1{
너비:15px;
높이:15px;
배경:#99CC00;
위치:절대;
오른쪽:0px;
하단:0px;
커서:nw-크기 조정;
오버플로:숨김;
글꼴 크기:12px;
텍스트 정렬:가운데;
줄 높이:15px;
색상:#FFFFFF;
부동:오른쪽;
Z-색인:3;
}
#맞아요{
너비:15px;
높이:100%;
배경:#f00;
부동:오른쪽;
위치:절대;
오른쪽:0;
상단:0;
커서:e-크기 조정;
오버플로:숨김;
필터:알파(불투명도:0);
불투명도:0;
Z-색인:1;
}
#하단{
너비:100%;
높이:15px;
배경:#f00;
위치:절대;
왼쪽:0;
하단:0;
커서:n-크기 조정;
오버플로:숨김;
필터:알파(불투명도:0);
불투명도:0;
Z-색인:1;
}
#div2p{
패딩:10px;
줄 높이:24px;
글꼴 크기:13px;
텍스트 들여쓰기:24px;
색상:#996600;
}
#div2 h2{
너비:100%;
높이:25px;
줄 높이:25px;
글꼴 크기:14px;
배경:#CC9900;
색상:#FFFFFF;
텍스트 들여쓰기:15px;
커서:이동;
오버플로:숨김;
}