집 >웹 프론트엔드 >JS 튜토리얼 >JavaScript는 QQ 공간 개인화 편집 모듈_기타 특수 효과와 유사한 div 드래그 및 크기 조정을 구현합니다.

JavaScript는 QQ 공간 개인화 편집 모듈_기타 특수 효과와 유사한 div 드래그 및 크기 조정을 구현합니다.

WBOY원래의: 2016-05-16 17:46:371209검색

QQ 공간을 자주 방문하는 친구들은 QQ 공간의 개인화된 편집 모듈에 깊은 인상을 받았을 것입니다. 페이지에서 요소를 드래그하고 크기를 조정하여 동적 레이아웃을 얻을 수 있습니다. 물론 저도 csdn 블로그에 갈 때마다 그렇게 할 것입니다. 오른쪽 하단에 있는 뉴스 창을 보세요. 이 효과는 정말 멋지므로 구현해 보겠습니다.

구현 단계:
1. 이에 대해:

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

< ;span id="move" style=" width:90%;height:100%">
닫기

< ;/div>

2. id가 body인 div 컨테이너는 콘텐츠를 배치할 div 컨테이너이고, move는 이동 가능한 범위입니다. close는 창을 닫는 것입니다(정확히 말하면 레이어).
3. 그런 다음 해당 객체에 이벤트를 바인딩합니다.

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

sx.activex.windowex={
init:function(step,t,html){
var a=document.createElement("div");
var head=document.createElement(" div");
var move=document.createElement("span")
var close=document. createElement("span");
close.innerText="Close";
var body =document.createElement("div")
head.appendChild(move); 닫기);
a.appendChild(head);
a.style.height="200px"; 🎜>a.style.overflow="숨김";
a.style.border="1px 빨간색 단색";
head.style.BackgroundColor="
head.style.height=" 5%";
move.style.width="90%";
move.style.height="100%";
close.style.height="100%";
닫기 .style.overflow="hidden";
close.style.whiteSpace="nowrap"
close.style.BackgroundColor="노란색";
body.style.height="93%"; 🎜>body.style.width="100%";
body.style.overflow="자동";
a.style.position="절대"
close.style.position="절대" ";
close.style.cursor="hand";
close.style.top =0 "px";
close.style.right=0 "px";
close.onclick= function(){
window.event.cancelBubble=true;
var q=a.offsetHeight
var h=window.setInterval(function(){
if(Math.abs(q) >=0){
a.style.height=q "px";
q=q-step
if(Math.abs(q)// e.style.height=q "px";
window.clearInterval(h);
//window.setTimeout(function(){
//alert(this==window);
close.style.cursor="normal";
a.parentNode.removeChild(a);
//a.style.lineHeight="0px"
//},10); }
}else{
window.clearInterval(h)
//a .style.display="none";
}
}
move.onmousedown=function(){
this.move=1;
this.x=window.event.offsetX;
//alert(this.x); window.event.offsetY;
this.setCapture();
}
move .onmousemove=function(){
this.style.cursor="move"; event.clientX<=0 || window.event.clientY<=0 || window.event.clientX> ;=document.body.clientWidth || window.event.clientY>=document.body.clientHeight){return false;}
if(this.move==1){

this.parentNode.parentNode.style.left=window.event.clientX-this.x "px"
this.parentNode.parentNode .style.top=window.event.clientY-this.y "px";
this.setCapture()
}
}
move.onmouseup=function(){
if (this.move==1){
this.move=0;
// this.style.cursor="normal";
this.releaseCapture()
}
}
a.onmousemove=function(){
if(this.move==1) {
if(window.event.clientX-this.offsetLeft<2 || window.event.clientY-this. offsetTop<2) return false;
this.style.width=window.event.clientX-this .offsetLeft "px"
this.style.height=window.event.clientY-this.offsetTop "px" ;
close.style.right="0px";
this.setCapture();
}
else{
if(window.event.offsetX-this.offsetWidth>-6 && window.event.offsetY-this.offsetHeight>-6)
this.style.cursor="nw-resize";
else
this.style.cursor="default"
}
}
a.onmouseup=function(){
if(this.move= =1){
this.move=0;
this.releaseCapture()
}
}
a.onmousedown=function(){
if(this.style.cursor=="nw-resize"){
this.move=1
this.setCapture() ;
}
}
body.innerHTML=html
반환
}

코드는 복잡하지 않습니다. 주로 onmousedown, onmousemove, onmouseup으로 구성됩니다. 마우스를 레이어의 오른쪽 하단으로 이동하면 마우스 포인터가 변경됩니다. 마우스를 움직여 이동하면 현재 레이어가 설정되고 마우스를 이동하면 마우스 위치에 따라 레이어 크기가 조정됩니다.

함수의 매개변수 단계는 숫자입니다. 닫기를 누를 때마다 시간 간격으로 이동할 단계 수, t는 시간, html은 본문 레이어에 삽입할 html 코드입니다.
호출 예는 다음과 같습니다.

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

 
 ;제목>제목 없는 문서 
< 본문>

성명：

이전 기사：Javascript 선택 윤곽 호버 확대 효과 구현 code_text 특수 효과다음 기사：Javascript 선택 윤곽 호버 확대 효과 구현 code_text 특수 효과

JavaScript는 QQ 공간 개인화 편집 모듈_기타 특수 효과와 유사한 div 드래그 및 크기 조정을 구현합니다.

관련 기사