Cómo arrastrar hacia la izquierda y hacia la derecha para cambiar de página
Arrastrar y soltar todavía tiene un efecto de página bastante bueno. Personalmente creo que su vitalidad radica en permitir a los usuarios realizar algunas operaciones por sí mismos, lo que se denomina personalización. Por ejemplo:
①Arrastra y suelta para cambiar el orden de las pestañas del navegador
Ahora, básicamente, todos los navegadores de pestañas tienen la función de arrastrar y cambiar el orden, como se muestra en la siguiente figura:
Cambio de pestaña de Chrome Zhang Xinxu-Nuevo espacio-Nueva vida
Podemos ver efectos similares en el cuadro emergente QQ Essence News, como se muestra en la siguiente imagen:
Cambio de secuencia de opciones de ventana emergente QQ Zhang Xinxu-Xin Space-Xin Life
②Pon el contenido donde quieras
Esto es más común en software de escritorio, como reproductores de video, Adobe Software de serie (CS3), etc.
La función de arrastrar y soltar en Photoshop Zhang Xinxu-Xin Space-Xin Life
En la página web también podemos ver el efecto de arrastrar y soltar, pero Por lo general, no es demasiado complicado. Por ejemplo, iGoogle (haga clic aquí para visitar): //zxx: el nombre de dominio ya no termina en punto cn, sino en punto com y punto hk
Arrastre y suelte Zhang Xinxu-New Space-New Life en la página de igoogle
También está Sina Weibo, que uso con frecuencia recientemente. Su capa emergente se puede arrastrar y soltar, a diferencia de Renren o QQ. Cuando ingreso información, a menudo necesito ver algún contenido en la página. Con la función de arrastrar y soltar, puedo mover el cuadro emergente hacia un lado para poder ver la información debajo. Las funciones más básicas y básicas. (La imagen a continuación es la capa emergente después de hacer clic en el botón de inicio de sesión en la página de registro de Sina Weibo)
La capa emergente de inicio de sesión en la página de registro de Sina Weibo Zhang Xinxu-New Space-New Life
2. Una breve descripción de los principios de implementación de JavaScript
En AS3, arrastrar y soltar se puede lograr usando startDrag(), pero en js no existe tal método, pero se puede. Implementado Para decirlo sin rodeos, puedo mover el cuadro a un lado para que pueda ver la siguiente información, que es la función principal y más básica de arrastrar y soltar. Es alcanzable y, para decirlo sin rodeos, es sencillo. Hay muchas formas de implementar arrastrar y soltar. En cuanto a mí, mis habilidades con js aún son superficiales y solo conozco un principio de implementación. Los detalles son los siguientes:
① Mueva el mouse hacia abajo → arrastrar
② Suelte el mouse → no arrastre
③Desplazamiento del mouse → distancia de arrastre
El método del evento JavaScript es:
① onmousedown onmousemove → startDrag()
② onmouseup → stopDrag()
③ ... .. .
La clave es asignar el valor de desplazamiento del mouse al objeto arrastrado. Tomemos un ejemplo:
Supongamos que Phoenix quiere arrastrarte a casa para que seas su marido, pero tú estás firmemente en contra, por lo que no puedes ser arrastrado, al igual que nosotros no podemos arrastrar y soltar un elemento de página normal.
Pero la hermana Feng es una "belleza" que nunca se ha visto en los últimos quinientos años. Tiene habilidades profundas. Utiliza una fuerza interna invisible para atarte. se cierra, no podrás resistirte. ¿Hasta dónde se puede retirar? Como resultado, para los forasteros, parece que seguiste a la hermana Feng por iniciativa propia. Esto es como cuando se arrastra y suelta, cuánto se desplaza el mouse, cuánto se mueve el elemento arrastrado con él, entonces el elemento parece moverse con el mouse.
Está bien, no entraré en detalles. Temo que si digo demasiado, provocará una tormenta de arena (caos) y luego me convertiré en un pecador.
3. Visualización, codificación y uso del efecto
Admito que los dos primeros párrafos son cuestionables en términos de extensión, pero esta parte no es como la vacuna Shanxi y no tiene humedad.
Encapsulo el efecto de arrastrar y soltar en un método. En el ejemplo de este artículo, este método es independiente de un archivo js y también se puede utilizar como un pequeño complemento.
El tamaño js de este efecto de arrastrar y soltar es inferior a 1K después de la compresión y se puede lograr con solo unas pocas docenas de líneas de código. No me gusta poner códigos largos en los artículos. .
Puede hacer clic aquí: zxx.drag.1.0.js o zxx.drag.1.0-min.js comprimido (se puede descargar haciendo clic con el botón derecho en [Destino | Enlace] Guardar como)
El método de uso es el siguiente:
Primero llame al archivo js de la siguiente manera:
lt; script src="/xtkf/?dy/js/zxx .drag.1.0.js "type="text/javascript"gt;lt;/scriptgt;
Luego use el método startDrag() para vincular el efecto de arrastre startDrag(). Para vincular el efecto de arrastre, el método startDrag() tiene dos parámetros. El primero es el objeto en el que se hizo clic (es decir, haga clic aquí para lograr el arrastre, como hacer aparecer la barra de título de la capa), y el segundo es el objeto arrastrado. Objetos en movimiento (como capas emergentes). Es decir, startDrag (el objeto que desencadenó el arrastre, el objeto que se arrastra).
Hice un diagrama esquemático simple, como se muestra a continuación:
Diagrama de uso de arrastrar y soltar Zhang Xinxu-Heart Space-Heart Life
El código de ejemplo de uso específico es el siguiente:
HTML/CSS
lt; estilo tipo="text/css"gt;
#box{position.absolute; izquierda: 100px superior: 100px; 5px; fondo: #f0f3f9; tamaño de fuente: 12px; -moz-box-shadow: 2px 2px 4px #666666; borde: 1px sólido #a0b3d6; fondo: blanco;}
#bar{line-height: 24px; fondo: #beceeb; borde inferior: 1px sólido #a0b3d6; mover;}
#content{ancho: 420px; alto: 250px; relleno: 10px 5px;}
lt /stylegt; ="box" gt;
lt;div id="main"gt;
lt;div id="bar"gt;draglt;/divgt;
lt; div id="contenido"gt;
contenido...
lt;/divgt;
lt;/divgt;
lt;/divgt;
lt;/divgt;
Parte JS
lt;script src="/study/js /zxx. arrastrar .1.0.js" type="text/javascript"gt;lt;/scriptgt;
lt;script type="text/javascript"gt;
var oBox = documento . getElementById("bar");
startDrag(oBar, oBox);
lt;/scriptgt;
En la parte js anterior, el código en negrita. Esta es la clave, no es fácil de usar.
Puedes hacer clic aquí: Demostración del efecto de arrastrar y soltar
Captura de pantalla del efecto de arrastrar y soltar:
Captura de pantalla del efecto de arrastrar y soltar Zhang Xinxu-Xin Space-Xin Life
Nota: Si lo que desea arrastrar y soltar no es absoluto o relativo (posición: absoluta/relativa), no verá el efecto.
4. El trabajo del robot de barrido
Para lograr el efecto de arrastrar y soltar más simple, es fácil de aprender de mí, porque las habilidades de js aún son superficiales y lo harán. será muy conveniente de usar en el futuro: llame directamente al enlace js y comience a arrastrar (objA, objB) para lograr el efecto. No obstante, si cree que el artículo está expresado de manera inexacta o tiene preguntas relacionadas que necesita comunicar, puede hacerlo comentando o haciendo preguntas aquí.