La mayoría de los diseños de Web constriñen a sí mismos a una cantidad limitada de espacio horizontal en la pantalla del navegador, por lo general alrededor de 950 a 960 píxeles. Barras laterales ocupan parte de este espacio también. Si desea agregar un cuadro que contiene contenido que es más fácil de leer cuando se le da más espacio horizontal, haciendo que el div expandible es una solución. Esta div puede ampliarsobre la barra lateral y tomar todo el espacio que usted quiere, y usted puede hacer disparar con un evento coloque el cursor en jQuery, un marco de JavaScript que funciona bien con animaciones.
AMPLIAR
Abra la página Web en el Bloc de notas o un editor de código y encontrar las etiquetas "div" para el div que desea ampliar hacia la izquierda. Obtener el nombre de identificación de la etiqueta de apertura "div".
Encuentra las etiquetas "estilo" entre la "cabeza" etiquetas en el código HTML. Añadir las etiquetas si no los encuentra. Agregar una regla de estilo que apunta el nombre del ID del div. Utilice esta regla para establecer el ancho del div.
Tipo style = "text / css"
# Expandir {
Ancho: 300px;
}
/ Estilo
Añadir "overflow: hidden" y una altura si desea crear un cuadro que se expande para mostrar más contenido.
Agregue el archivo de la biblioteca jQuery entre las etiquetas "cabeza", colocándolo en algún lugar debajo de las etiquetas "estilo":
script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" / script
Coloque un nuevo par de etiquetas "scripts" a continuación el archivo de biblioteca jQuery y escribir la función "documento listo" que mantendrá el script se ejecute hasta que la página termine de cargar:
script type = "text / javascript"
$ (Function () {
});
/ Script
Todo el código de secuencia de comandos irá entre las llaves de esta función.
Dirigirse a su div utilizando su ID de un selector de jQuery y agregar el "vuelo estacionario ()" función para realizar la div hacer algo cuando el usuario se desplaza sobre él:
$ ('# Ampliar'). Pasa (function () {
}, La función () {
});
Cuando utilice "libración ()" se necesitan dos funciones: una para lo que sucede cuando el usuario se desplaza sobre un elemento y otro para lo que sucede cuando el usuario mueve el puntero del ratón.
Añadir función para el primer "vuelo estacionario ()" función "animate ()". Establezca una anchura de "+ =" el número adicional de píxeles que desea añadir a la anchura del div cuando se expande. Sustituir "500" en este código con el número de milisegundos que desea para la velocidad de la animación:
$ (This). Animate ({
anchura: '+ = 200'
}, 500, function () {});
Sustituir "200" por el número de píxeles que desea agregar a la anchura div. Este ejemplo de código utiliza "$ (this)" para seleccionar el elemento principal, que es la div. Es igual a "$ ('div')" en este script.
Invierta la animación de ancho en expansión cuando el usuario mouses lejos de la div:
$ (This). Animate ({
anchura: '- = 200'
}, 500, function () {});
El guión terminado se ve así:
$ (Function () {
$ ('# Ampliar'). Pasa (function () {
$ (This). Animate ({
anchura: '+ = 200'
}, 500, function () {});
}, La función () {
$ ('# Ampliar'). Animate ({
anchura: '- = 200'
});
});
});
Excelente
ResponderEliminar