드래그 앤 드롭 페이지 넘김(ThrowPage)에 대한 자세한 설명

저자：Eve Cole 업데이트 시간：2009-11-30 15:46:23

올해 4월에는 기숙사에서 드래그 앤 드롭으로 페이지 넘기는 효과를 만들었습니다.

원래 내 블로그 웹사이트를 위해 디자인된 것인데 화요일에 아이디어를 얻었고, 좌표를 계산하기 위해 수요일과 목요일에 수업을 빼먹고 저녁에 첫 번째 버전을 작성했습니다. 출시 후 평가가 꽤 좋았을 것으로 예상되는데, 이 효과를 웹사이트에서 사용하려면 어떻게 수정해야 하는지 문의하시는 분들이 많아 이 효과의 원리를 자세히 설명하고자 이 글을 올립니다.

저는 이 효과를 공식적으로 ThrowPage라고 명명하고 이 효과를 지속적으로 개선하여 모든 사람이 In Me God Trust를 호출할 수 있도록 캡슐화된 코드를 공개할 것입니다.

이 기사는 구조적 계층, 표현 계층, 행동 계층의 세 가지 개별 계층 순서로 작성됩니다.

코드 상자 실행

<html>
<머리>
<title>ThrowPage</title>
<스타일 유형="텍스트/css">
HTML,본문{
너비:100%;
높이:100%;
테두리:0px;
여백:0px;
오버플로:숨김;
}
#메뉴{
너비:1000px;
높이:500px;
오버플로:숨김;
배경:밝은 파란색;
}
.페이지{
위치:절대;
너비:300px;
높이:400px;
왼쪽:350px;
상단:50px;
배경:#FFF;
테두리:1px 솔리드 #999;
}
ul{
목록 스타일:없음;
높이:320px;
여백:20px;
패딩:0px;
배경:#EEE;
}
리{

글꼴 크기:12px;
높이:20px;
줄 높이:20px;
border-bottom:1px 점선 #999;
}
리 스팬{
플로트:오른쪽;
}
리 아{
색상:#000;
텍스트 장식:없음;
}
리 a:hover{
텍스트 장식:밑줄;
}
.팁{
표시:블록;
높이:20px;
여백:0px 20px;
줄 높이:20px;
텍스트 정렬:가운데;
글꼴 크기:12px;
배경:#999;
}
</style>
</head>
<본문>
<스크립트 유형="텍스트/자바스크립트">
함수 ID(obj){
return document.getElementById(obj);
}
var 페이지;
varmx;
var md=false;
var sh=0;
var en=false;
window.onload=함수(){
page=id("menu").getElementsByTagName("div");
if(페이지.길이>0){
페이지[0].style.zIndex=2;
}
for(i=0;i<page.length;i++){
page[i].innerHTML+="<span class="tip">"+(i+1)+"/"+page.length+"페이지 끌어서 놓기</span>";
페이지[i].id="페이지"+i;
페이지[i].i=i;
페이지[i].onmousedown=function(e){
if(!en){
if(!e){e=e||window.event;}
ex=e.pageX?e.pageX:ex;
mx=350-ex;
this.style.cursor="이동";
MD=참;
if(문서.모두){
this.setCapture();
}또 다른{
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
}
}
페이지[i].onmousemove=function(e){
만약(MD){
엔=참;
if(!e){e=e||window.event;}
ex=e.pageX?e.pageX:ex;
this.style.left=ex+mx+"px";
if(this.offsetLeft<350){
var cu=(this.i==0)?page.length-1:this.i-1;
페이지[sh].style.zIndex=0;
페이지[cu].style.zIndex=1;
this.style.zIndex=2;
sh=cu;
}
if(this.offsetLeft>350){
var cu=(this.i==page.length-1)?0:this.i+1;
페이지[sh].style.zIndex=0;
페이지[cu].style.zIndex=1;
this.style.zIndex=2;
sh=cu;
}
}
}
페이지[i].onmouseup=function(){
this.style.cursor="기본값";
MD=거짓;
if(this.offsetLeft==350){
en=거짓;
}
if(문서.모두){
this.releaseCapture();
}또 다른{
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
플라이아웃(this);
}
}
}
함수 플라이아웃(obj){
if(obj.offsetLeft < 350){
if( (obj.offsetLeft - 10) > 50 ){
obj.style.left=obj.offsetLeft - 10 + "px";
window.setTimeout("flyout(id('"+obj.id+"'));",0);
}또 다른{
obj.style.left= 50 +"px";
obj.style.zIndex=0;
flyin(id(obj.id));
}
}
if(obj.offsetLeft > 350){
if((obj.offsetLeft + 10) < 650){
obj.style.left=obj.offsetLeft + 10 + "px";
window.setTimeout("flyout(id('"+obj.id+"'));",0);
}또 다른{
obj.style.left= 650 + "px";
obj.style.zIndex=0;
flyin(id(obj.id));
}
}
}
함수 플라이인(obj){
if(obj.offsetLeft<350){
if((obj.offsetLeft + 10) < 350){
obj.style.left=obj.offsetLeft + 10+"px";
window.setTimeout("flyin(id('"+obj.id+"'));",0);
}또 다른{
obj.style.left= 350 +"px";
en=거짓;
}
}
if(obj.offsetLeft>350){
if((obj.offsetLeft - 10) > 350){
obj.style.left=obj.offsetLeft - 10 +"px";
window.setTimeout("flyin(id('"+obj.id+"'));",0);
}또 다른{
obj.style.left=350+"px";
en=거짓;
}
}
}
</script>
<div id="메뉴">
<div 클래스="페이지">
<ul>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> 파트너</a></li>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> 아름다운 섬</a></li>
<li style="Background:coral;"><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> 댄서</a>< /li>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> 손에 손잡고</a></li>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> 첫사랑의 집</a></li>
</ul>
</div>
<div 클래스="페이지">
<ul>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> 아! 멈출 수 없는 연인</a></li>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> 네트워크</a></li>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> 매혹적인 비</a></li>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> 지난 2000년</a></li>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> 녹색 테러리스트</a></li>
</ul>
</div>
<div 클래스="페이지">
<ul>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> 시간이 점점 사라지고 있습니다</a></li>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> 조용한 온천</a></li>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> 피어나는 꽃</a></li>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> 아휘가 개를 키웠어요</a></li >
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> 참 또는 거짓</a></li>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> 남대만 차이잉원 공산당</a></li>
</ul>
</div>
</div>
</body>
</html>

[Ctrl+A 모든 팁 선택: 먼저 코드의 일부를 수정한 후 실행을 누를 수 있습니다.]

구조층

페이지별로 디렉토리의 내용을 확장하는 방법은 무엇입니까? 그럴 수도 있겠네요, 적어도 저는 그렇게 썼어요

<ul>은 각 페이지의 목록이며, 사진에서 밝은 회색 부분입니다.
<li>는 목록의 항목입니다. 사진의 산호 부분은
<span class="tip">은 xhtml에 표시되어서는 안되며 js에서 추가해야 합니다. 각 페이지 아래의 인덱스 표시로 그림에서 어두운 회색 부분입니다.
<div class="page"> 는 디렉토리에 있는 페이지이며, 그림에서 흰색 부분입니다.
<div id="menu">는 그림에서 밝은 파란색 부분인 모든 페이지를 포함하는 디렉토리입니다. 물론 페이지에 이 효과 외에 다른 것이 없다면 이 태그를 작성할 필요가 없으며 모든 <div class="page">의 상위 태그는 <body>입니다.
어쩌면 디렉토리도 <ul>이어야 하므로 이렇게 작성해야 한다고 말할 수도 있습니다.

이는 실제로 더 의미론적이지만 문제는 즉시 발생합니다.