En abril de este año, creé un efecto de pasar página de arrastrar y soltar en mi dormitorio.
Fue diseñado originalmente para mi propio blog. Se me ocurrió la idea el martes. Falté a clases durante dos días el miércoles y el jueves para contar las coordenadas. Fui a casa el viernes y no escribí la primera versión. Espero que las críticas hayan sido bastante buenas después de su lanzamiento. Mucha gente me ha preguntado cómo debo modificar este efecto para poder usarlo en mi sitio web, así que publico esta publicación para explicar el principio de este efecto en detalle.
Oficialmente llamo a este efecto ThrowPage, y definitivamente continuaré mejorando este efecto y publicaré el código encapsulado para que todos puedan llamarlo Tal vez un mes después, tal vez un año después, In Me God Trust.
Este artículo se escribirá en el orden de tres capas separadas: capa estructural, capa de presentación y capa de comportamiento:
Ejecutar cuadro de código
<html>
<cabeza>
<título>Página de lanzamiento</título>
<tipo de estilo="texto/css">
html,cuerpo{
ancho: 100%;
altura: 100%;
borde: 0px;
margen: 0px;
desbordamiento: oculto;
}
#menú{
ancho: 1000px;
altura: 500 px;
desbordamiento: oculto;
fondo: azul claro;
}
.página{
posición:absoluta;
ancho: 300 px;
altura: 400 px;
izquierda: 350px;
arriba: 50px;
fondo:#FFF;
borde: 1px sólido #999;
}
ul{
estilo de lista: ninguno;
altura: 320 px;
margen: 20px;
relleno: 0px;
fondo:#EEE;
}
li{
tamaño de fuente: 12px;
altura: 20 píxeles;
altura de línea: 20 px;
borde inferior: 1px discontinuo #999;
}
li span {
flotador:derecha;
}
li a {
color:#000;
decoración de texto: ninguna;
}
li a: flotar {
decoración de texto: subrayado;
}
.consejo{
mostrar:bloquear;
altura: 20 píxeles;
margen: 0px 20px;
altura de línea: 20 px;
alineación de texto:centro;
tamaño de fuente: 12px;
fondo:#999;
}
</estilo>
</cabeza>
<cuerpo>
<tipo de script="texto/javascript">
identificación de función (obj) {
devolver document.getElementById(obj);
}
página var;
varmx;
var md=falso;
var sh=0;
var en=falso;
ventana.onload=función(){
página=id("menú").getElementsByTagName("div");
si(página.longitud>0){
página[0].style.zIndex=2;
}
for(i=0;i<página.longitud;i++){
page[i].innerHTML+="<span class="tip">"+(i+1)+"/"+page.length+"Arrastrar y soltar página</span>";
página[i].id="página"+i;
página[i].i=i;
página[i].onmousedown=función(e){
si(!es){
if(!e){e=e||ventana.evento;}
ex=e.páginaX?e.páginaX:ex;
mx=350-ex;
this.style.cursor="mover";
md=verdadero;
si(documento.todo){
this.setCapture();
}demás{
ventana.captureEvents(Evento.MOUSEMOVE|Evento.MOUSEUP);
}
}
}
página[i].onmousemove=función(e){
si(md){
en=verdadero;
if(!e){e=e||ventana.evento;}
ex=e.páginaX?e.páginaX:ex;
this.style.left=ex+mx+"px";
si(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;
}
si(this.offsetLeft>350){
var cu=(this.i==página.longitud-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=función(){
this.style.cursor="predeterminado";
md=falso;
si(this.offsetLeft==350){
en=falso;
}
si(documento.todo){
this.releaseCapture();
}demás{
ventana.releaseEvents(Evento.MOUSEMOVE|Evento.MOUSEUP);
}
menú flotante(esto);
}
}
}
menú lateral de función (obj) {
si(obj.offsetLeft < 350){
si((obj.offsetLeft - 10) > 50 ){
obj.style.left=obj.offsetLeft - 10 + "px";
window.setTimeout("flyout(id('"+obj.id+"'));",0);
}demás{
obj.style.left= 50 +"px";
obj.style.zIndex=0;
volando(id(obj.id));
}
}
si(obj.offsetLeft > 350){
si((obj.offsetLeft + 10) < 650){
obj.style.left=obj.offsetLeft + 10 + "px";
window.setTimeout("flyout(id('"+obj.id+"'));",0);
}demás{
obj.style.left= 650 + "px";
obj.style.zIndex=0;
volando(id(obj.id));
}
}
}
función volando (obj) {
si(obj.offsetLeft<350){
si((obj.offsetLeft + 10) < 350){
obj.style.left=obj.offsetLeft + 10+"px";
window.setTimeout("flyin(id('"+obj.id+"'));",0);
}demás{
obj.style.left= 350 +"px";
en=falso;
}
}
si(obj.offsetLeft>350){
si((obj.offsetLeft - 10) > 350){
obj.style.left=obj.offsetLeft - 10 +"px";
window.setTimeout("flyin(id('"+obj.id+"'));",0);
}demás{
obj.style.left=350+"px";
en=falso;
}
}
}
</script>
<div id="menú">
<div clase="página">
<ul>
<li><span>25-11-09</span> <a href=" http://www.oern.cn " target="_blank"> Socio</a></li>
<li><span>25-11-09</span> <a href=" http://www.oern.cn " target="_blank"> Hermosa isla</a></li>
<li style="background:coral;"><span>11-09-25</span> <a href=" http://www.oern.cn " target="_blank"> Bailarina</a>< /li>
<li><span>25-11-09</span> <a href=" http://www.oern.cn " target="_blank"> De la mano</a></li>
<li><span>25-11-09</span> <a href=" http://www.oern.cn " target="_blank"> El primer hogar del amor</a></li>
</ul>
</div>
<div clase="página">
<ul>
<li><span>25-11-09</span> <a href=" http://www.oern.cn " target="_blank"> ¡Ah! El amante imparable</a></li>
<li><span>25/11/09</span> <a href=" http://www.oern.cn " target="_blank"> Red</a></li>
<li><span>25-11-09</span> <a href=" http://www.oern.cn " target="_blank"> Lluvia seductora</a></li>
<li><span>25/11/09</span> <a href=" http://www.oern.cn " target="_blank"> Pasado el año 2000</a></li>
<li><span>25-11-09</span> <a href=" http://www.oern.cn " target="_blank"> Terrorista verde</a></li>
</ul>
</div>
<div clase="página">
<ul>
<li><span>25-11-09</span> <a href=" http://www.oern.cn " target="_blank"> El tiempo está desapareciendo lentamente</a></li>
<li><span>25-11-09</span> <a href=" http://www.oern.cn " target="_blank"> Fuentes termales tranquilas</a></li>
<li><span>25-11-09</span> <a href=" http://www.oern.cn " target="_blank"> Flores en flor</a></li>
<li><span>25-11-09</span> <a href=" http://www.oern.cn " target="_blank"> Ah Hui crió un perro</a></li >
<li><span>25-11-09</span> <a href=" http://www.oern.cn " target="_blank"> Verdadero o falso</a></li>
<li><span>25-11-09</span> <a href=" http://www.oern.cn " target="_blank"> Partido Comunista Tsai del Sur de Taiwán</a></li>
</ul>
</div>
</div>
</cuerpo>
</html>
[Ctrl+A Seleccionar todos los consejos: primero puede modificar parte del código y luego presionar Ejecutar]
capa estructural
¿Cómo ampliar el contenido de un directorio por página? Tal vez sea así, al menos así lo escribí.
<div id="menú">
<div clase="página">
<ul>
<li><span>09-11-25</span><a>Canción de amor 1980</a></li>
<li><span>09-11-25</span><a>Canción de amor 1990</a></li>
<li><span>09-11-25</span><a>Canción de amor 2000</a></li>
<li><span>09-11-25</span><a>Madre</a></li>
</ul>
<span class="tip">arrastrar y soltar 1/2 página</span>
</div>
<div clase="página">
<ul>
<li><span>09-11-25</span><a>Socio</a></li>
<li><span>11-09-25</span><a>Desaparecido</a></li>
<li><span>09-11-25</span><a>Infancia</a></li>
<li><span>09-11-25</span><a>Niño pastor</a></li>
</ul>
<span class="tip">2/2 páginas arrastrar y soltar para pasar páginas</span>
</div>
</div>
.jpg)
<ul> es una lista de cada página, la parte gris claro en la imagen
<li> es un elemento en la lista, la parte de coral en la imagen
<span class="tip"> no debería aparecer en xhtml y js debería agregarlo. Es la marca de índice debajo de cada página, la parte gris oscura de la imagen.
<div class="page"> es la página en el directorio, la parte blanca en la imagen
<div id="menu"> es un directorio que contiene todas las páginas, la parte azul brillante de la imagen. Por supuesto, si no hay nada más en la página excepto este efecto, no es necesario escribir esta etiqueta, entonces la etiqueta principal de todas las <div class="page"> es <body>
Tal vez digas que el directorio también debería ser <ul>, por lo que debería escribirse así
<ul id="menú">
<li clase="página">
<ul>
<li><span>09-11-25</span><a>Canción de amor 1980</a></li>
<li><span>09-11-25</span><a>Canción de amor 1990</a></li>
<li><span>09-11-25</span><a>Canción de amor 2000</a></li>
<li><span>09-11-25</span><a>Madre</a></li>
</ul>
<span class="tip">arrastrar y soltar 1/2 página</span>
</li>
<ul clase="página">
<ul>
<li><span>09-11-25</span><a>Socio</a></li>
<li><span>11-09-25</span><a>Desaparecido</a></li>
<li><span>09-11-25</span><a>Infancia</a></li>
<li><span>09-11-25</span><a>Niño pastor</a></li>
</ul>
<span class="tip">2/2 páginas arrastrar y soltar para pasar páginas</span>
</li>
</li>
De hecho, esto es más semántico, pero el problema surgirá de inmediato.