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,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;
}
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[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;
}
}
}
[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í.
arrastrar y soltar 1/2 página
2/2 páginas arrastrar y soltar para pasar páginas
.jpg)