In April this year, I created a drag-and-drop page-turning effect in my dormitory.
It was originally designed for my own blog website. I got the idea on Tuesday. I skipped class for two days on Wednesday and Thursday to count the coordinates. I went home on Friday and wrote the first version in the evening. I didn’t expect that the reviews were pretty good after it was released. Many people have asked me how I should modify this effect so that I can use it on my website, so I am posting this post to explain the principle of this effect in detail.
I officially name this effect ThrowPage, and I will definitely continue to improve this effect and release the encapsulated code for everyone to call. Maybe a month later, maybe a year later, In Me God Trust
This article will be written in the order of three separate layers: structural layer, presentation layer and behavioral layer:
Run code box
<html>
<head>
<title>ThrowPage</title>
<style type="text/css">
html,body{
width:100%;
height:100%;
border:0px;
margin:0px;
overflow:hidden;
}
#menu{
width:1000px;
height:500px;
overflow:hidden;
background:lightblue;
}
.page{
position:absolute;
width:300px;
height:400px;
left:350px;
top:50px;
background:#FFF;
border:1px solid #999;
}
ul{
list-style:none;
height:320px;
margin:20px;
padding:0px;
background:#EEE;
}
li{
font-size:12px;
height:20px;
line-height:20px;
border-bottom:1px dashed #999;
}
li span{
float:right;
}
li a{
color:#000;
text-decoration:none;
}
li a:hover{
text-decoration:underline;
}
.tip{
display:block;
height:20px;
margin:0px 20px;
line-height:20px;
text-align:center;
font-size:12px;
background:#999;
}
</style>
</head>
<body>
<script type="text/javascript">
function id(obj){
return document.getElementById(obj);
}
var page;
varmx;
var md=false;
var sh=0;
var en=false;
window.onload=function(){
page=id("menu").getElementsByTagName("div");
if(page.length>0){
page[0].style.zIndex=2;
}
for(i=0;i<page.length;i++){
page[i].innerHTML+="<span class="tip">"+(i+1)+"/"+page.length+"Page drag and drop</span>";
page[i].id="page"+i;
page[i].i=i;
page[i].onmousedown=function(e){
if(!en){
if(!e){e=e||window.event;}
ex=e.pageX?e.pageX:ex;
mx=350-ex;
this.style.cursor="move";
md=true;
if(document.all){
this.setCapture();
}else{
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
}
}
page[i].onmousemove=function(e){
if(md){
en=true;
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;
page[sh].style.zIndex=0;
page[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;
page[sh].style.zIndex=0;
page[cu].style.zIndex=1;
this.style.zIndex=2;
sh=cu;
}
}
}
page[i].onmouseup=function(){
this.style.cursor="default";
md=false;
if(this.offsetLeft==350){
en=false;
}
if(document.all){
this.releaseCapture();
}else{
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
flyout(this);
}
}
}
function flyout(obj){
if(obj.offsetLeft < 350){
if( (obj.offsetLeft - 10) > 50 ){
obj.style.left=obj.offsetLeft - 10 + "px";
window.setTimeout("flyout(id('"+obj.id+"'));",0);
}else{
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);
}else{
obj.style.left= 650 + "px";
obj.style.zIndex=0;
flyin(id(obj.id));
}
}
}
function flyin(obj){
if(obj.offsetLeft<350){
if((obj.offsetLeft + 10) < 350){
obj.style.left=obj.offsetLeft + 10+"px";
window.setTimeout("flyin(id('"+obj.id+"'));",0);
}else{
obj.style.left= 350 +"px";
en=false;
}
}
if(obj.offsetLeft>350){
if((obj.offsetLeft - 10) > 350){
obj.style.left=obj.offsetLeft - 10 +"px";
window.setTimeout("flyin(id('"+obj.id+"'));",0);
}else{
obj.style.left=350+"px";
en=false;
}
}
}
</script>
<div id="menu">
<div class="page">
<ul>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> Partner</a></li>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> Beautiful Island</a></li>
<li style="background:coral;"><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> Dancer</a>< /li>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> Hand in hand</a></li>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> The first love home</a></li>
</ul>
</div>
<div class="page">
<ul>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> Ah! The unstoppable lover</a></li>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> Network</a></li>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> Alluring Rain</a></li>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> Past 2000</a></li>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> Green Terrorist</a></li>
</ul>
</div>
<div class="page">
<ul>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> Time is slowly disappearing</a></li>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> Quiet Hot Spring</a></li>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> Blooming flowers</a></li>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> Ah Hui raised a dog</a></li >
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> True or fake</a></li>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> South Taiwan Tsai Communist Party</a></li>
</ul>
</div>
</div>
</body>
</html>
[Ctrl+A Select All Tips: You can modify part of the code first and then press Run]
structural layer
How to expand the contents of a directory by page? Maybe so, at least that's how I wrote it
<div id="menu">
<div class="page">
<ul>
<li><span>09-11-25</span><a>Love Song 1980</a></li>
<li><span>09-11-25</span><a>Love Song 1990</a></li>
<li><span>09-11-25</span><a>Love Song 2000</a></li>
<li><span>09-11-25</span><a>Mother</a></li>
</ul>
<span class="tip">1/2 page drag and drop</span>
</div>
<div class="page">
<ul>
<li><span>09-11-25</span><a>Partner</a></li>
<li><span>09-11-25</span><a>Missing</a></li>
<li><span>09-11-25</span><a>Childhood</a></li>
<li><span>09-11-25</span><a>Shepherd Boy</a></li>
</ul>
<span class="tip">2/2 pages drag and drop to turn pages</span>
</div>
</div>
.jpg)
<ul> is a list of each page, the light gray part in the picture
<li> is an item in the list, the coral part in the picture
<span class="tip"> should not appear in xhtml and should be added by js. It is the index mark under each page, the dark gray part in the picture
<div class="page"> is the page in the directory, the white part in the picture
<div id="menu"> is a directory that contains all pages, the bright blue part in the picture. Of course, if there is nothing else on the page except this effect, this tag does not need to be written, then the parent tag of all <div class="page"> is <body>
Maybe you will say that the directory should also be <ul>, so it should be written like this
<ul id="menu">
<li class="page">
<ul>
<li><span>09-11-25</span><a>Love Song 1980</a></li>
<li><span>09-11-25</span><a>Love Song 1990</a></li>
<li><span>09-11-25</span><a>Love Song 2000</a></li>
<li><span>09-11-25</span><a>Mother</a></li>
</ul>
<span class="tip">1/2 page drag and drop</span>
</li>
<ul class="page">
<ul>
<li><span>09-11-25</span><a>Partner</a></li>
<li><span>09-11-25</span><a>Missing</a></li>
<li><span>09-11-25</span><a>Childhood</a></li>
<li><span>09-11-25</span><a>Shepherd Boy</a></li>
</ul>
<span class="tip">2/2 pages drag and drop to turn pages</span>
</li>
</li>
This is indeed more semantic, but the problem will arise immediately