Em abril deste ano, criei um efeito de arrastar e soltar para virar as páginas em meu dormitório.
Foi originalmente projetado para o meu próprio blog. Tive a ideia na terça. Faltei às aulas por dois dias na quarta e na quinta para contar as coordenadas. Fui para casa na sexta e escrevi a primeira versão à noite. espero que as críticas tenham sido muito boas depois de lançado. Muitas pessoas me perguntaram como devo modificar esse efeito para poder usá-lo em meu site, por isso estou postando este post para explicar detalhadamente o princípio desse efeito.
Eu oficialmente chamo esse efeito de ThrowPage e com certeza continuarei a melhorar esse efeito e liberar o código encapsulado para que todos possam ligar. Talvez um mês depois, talvez um ano depois, In Me God Trust.
Este artigo será escrito na ordem de três camadas distintas: camada estrutural, camada de apresentação e camada comportamental:
Execute a caixa de código
<html>
<cabeça>
<title>LançarPágina</title>
<style type="texto/css">
html,corpo{
largura:100%;
altura:100%;
borda:0px;
margem:0px;
estouro: oculto;
}
#menu{
largura:1000px;
altura:500px;
estouro: oculto;
fundo: azul claro;
}
.página{
posição:absoluta;
largura:300px;
altura:400px;
esquerda:350px;
topo:50px;
fundo:#FFF;
borda:1px sólido #999;
}
ul{
estilo de lista: nenhum;
altura:320px;
margem:20px;
preenchimento:0px;
histórico:#EEE;
}
li{
tamanho da fonte: 12px;
altura:20px;
altura da linha: 20px;
border-bottom:1px tracejado #999;
}
li span{
flutuar:certo;
}
eu sou{
cor:#000;
decoração de texto: nenhum;
}
li a:passar o mouse{
decoração de texto: sublinhado;
}
.dica{
exibição: bloco;
altura:20px;
margem:0px 20px;
altura da linha: 20px;
alinhamento de texto:centro;
tamanho da fonte: 12px;
plano de fundo:#999;
}
</estilo>
</head>
<corpo>
<script type="texto/javascript">
ID da função(obj){
retornar document.getElementById(obj);
}
var página;
varmx;
varmd=falso;
var sh=0;
var en=falso;
janela.onload=função(){
page=id("menu").getElementsByTagName("div");
if(página.comprimento>0){
página[0].style.zIndex=2;
}
for(i=0;i<page.length;i++){
page[i].innerHTML+="<span class="tip">"+(i+1)+"/"+page.length+"Arrastar e soltar página</span>";
página[i].id="página"+i;
página[i].i=i;
página[i].onmousedown=função(e){
if(!en){
if(!e){e=e||window.event;}
ex=e.páginaX?e.páginaX:ex;
mx=350-ex;
this.style.cursor="mover";
md=verdadeiro;
if(documento.todos){
this.setCapture();
}outro{
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
}
}
página[i].onmousemove=função(e){
se(md){
en=verdadeiro;
if(!e){e=e||window.event;}
ex=e.páginaX?e.páginaX:ex;
this.style.left=ex+mx+"px";
if(this.offsetLeft<350){
var cu=(this.i==0)?page.length-1:this.i-1;
página[sh].style.zIndex=0;
página[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;
página[sh].style.zIndex=0;
página[cu].style.zIndex=1;
this.style.zIndex=2;
sh=cu;
}
}
}
página[i].onmouseup=function(){
this.style.cursor="default";
md=falso;
if(this.offsetLeft==350){
pt=falso;
}
if(documento.todos){
this.releaseCapture();
}outro{
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
submenu(isto);
}
}
}
submenu de função(obj){
if(obj.offsetLeft <350){
if((obj.offsetLeft - 10) > 50){
obj.style.left=obj.offsetLeft - 10 + "px";
window.setTimeout("flyout(id('"+obj.id+"'));",0);
}outro{
obj.style.left= 50 +"px";
obj.style.zIndex=0;
voando(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);
}outro{
obj.style.left= 650 + "px";
obj.style.zIndex=0;
voando(id(obj.id));
}
}
}
função voando(obj){
if(obj.offsetLeft<350){
if((obj.offsetLeft + 10) <350){
obj.style.left=obj.offsetLeft + 10+"px";
window.setTimeout("flyin(id('"+obj.id+"'));",0);
}outro{
obj.style.left= 350 +"px";
pt=falso;
}
}
if(obj.offsetLeft>350){
if((obj.offsetLeft - 10) > 350){
obj.style.left=obj.offsetLeft - 10 +"px";
window.setTimeout("flyin(id('"+obj.id+"'));",0);
}outro{
obj.style.left=350+"px";
pt=falso;
}
}
}
</script>
<div id="menu">
<div class="página">
<ul>
<li><span>25/11/09</span> <a href=" http://www.oern.cn " target="_blank"> Parceiro</a></li>
<li><span>25/11/09</span> <a href=" http://www.oern.cn " target="_blank"> Linda ilha</a></li>
<li style="background:coral;"><span>25/11/09</span> <a href=" http://www.oern.cn " target="_blank"> Dançarina</a>< /li>
<li><span>25/11/09</span> <a href=" http://www.oern.cn " target="_blank"> De mãos dadas</a></li>
<li><span>25/11/09</span> <a href=" http://www.oern.cn " target="_blank"> O primeiro lar de amor</a></li>
</ul>
</div>
<div class="página">
<ul>
<li><span>25/11/09</span> <a href=" http://www.oern.cn " target="_blank"> Ah! O amante imparável</a></li>
<li><span>25/11/09</span> <a href=" http://www.oern.cn " target="_blank"> Rede</a></li>
<li><span>25/11/09</span> <a href=" http://www.oern.cn " target="_blank"> Chuva sedutora</a></li>
<li><span>25/11/09</span> <a href=" http://www.oern.cn " target="_blank"> Últimos anos 2000</a></li>
<li><span>25/11/09</span> <a href=" http://www.oern.cn " target="_blank"> Terrorista Verde</a></li>
</ul>
</div>
<div class="página">
<ul>
<li><span>25/11/09</span> <a href=" http://www.oern.cn " target="_blank"> O tempo está desaparecendo lentamente</a></li>
<li><span>25/11/09</span> <a href=" http://www.oern.cn " target="_blank"> Fontes termais tranquilas</a></li>
<li><span>25/11/09</span> <a href=" http://www.oern.cn " target="_blank"> Flores desabrochando</a></li>
<li><span>25/11/09</span> <a href=" http://www.oern.cn " target="_blank"> Ah Hui criou um cachorro</a></li >
<li><span>25/11/09</span> <a href=" http://www.oern.cn " target="_blank"> Verdadeiro ou falso</a></li>
<li><span>25/11/09</span> <a href=" http://www.oern.cn " target="_blank"> Partido Comunista Tsai do Sul de Taiwan</a></li>
</ul>
</div>
</div>
</body>
</html>
[Ctrl+A Selecionar todas as dicas: você pode modificar parte do código primeiro e depois pressionar Executar]
camada estrutural
Como expandir o conteúdo de um diretório por página? Talvez sim, pelo menos foi assim que escrevi
<div id="menu">
<div class="página">
<ul>
<li><span>25/11/09</span><a>Canção de Amor 1980</a></li>
<li><span>25/11/09</span><a>Canção de Amor 1990</a></li>
<li><span>25/11/09</span><a>Canção de Amor 2000</a></li>
<li><span>25/11/09</span><a>Mãe</a></li>
</ul>
<span class="tip">Arrastar e soltar meia página</span>
</div>
<div class="página">
<ul>
<li><span>25/11/09</span><a>Parceiro</a></li>
<li><span>25/11/09</span><a>Desaparecido</a></li>
<li><span>25/11/09</span><a>Infância</a></li>
<li><span>25/11/09</span><a>Menino Pastor</a></li>
</ul>
<span class="tip">Arraste e solte 2/2 páginas para virar as páginas</span>
</div>
</div>
.jpg)
<ul> é uma lista de cada página, a parte cinza claro da imagem
<li> é um item da lista, a parte coral na imagem
<span class="tip"> não deve aparecer em xhtml e deve ser adicionado por js. É a marca de índice abaixo de cada página, a parte cinza escuro da imagem.
<div class="page"> é a página do diretório, a parte branca da imagem
<div id="menu"> é um diretório que contém todas as páginas, a parte azul brilhante da imagem. Claro, se não houver mais nada na página além deste efeito, esta tag não precisa ser escrita, então a tag pai de todos <div class="page"> é <body>
Talvez você diga que o diretório também deveria ser <ul>, então deveria ser escrito assim
<ul id="menu">
<li class="página">
<ul>
<li><span>25/11/09</span><a>Canção de Amor 1980</a></li>
<li><span>25/11/09</span><a>Canção de Amor 1990</a></li>
<li><span>25/11/09</span><a>Canção de Amor 2000</a></li>
<li><span>25/11/09</span><a>Mãe</a></li>
</ul>
<span class="tip">Arrastar e soltar meia página</span>
</li>
<ul class="página">
<ul>
<li><span>25/11/09</span><a>Parceiro</a></li>
<li><span>25/11/09</span><a>Desaparecido</a></li>
<li><span>25/11/09</span><a>Infância</a></li>
<li><span>25/11/09</span><a>Menino Pastor</a></li>
</ul>
<span class="tip">Arraste e solte 2/2 páginas para virar as páginas</span>
</li>
</li>
Isto é realmente mais semântico, mas o problema surgirá imediatamente