Magia HTML Bordes cliente - Parte 2 Introducción Esta es la segunda parte de mi serie, bordes de clientes Magia HTML. Aquí, vemos la forma de aplicar los bordes de clientes Magia HTML. En esta parte, vamos a considerar el caso, en la calculadora (elemento DIV interior) sale del borde izquierdo de la página y vuelve cuando sea necesario. Naturaleza de la mímica Borde izquierdo tenemos que poner un borde mímica justo al lado del borde izquierdo. Nuestra ventaja mímica es un elemento DIV.
Así que creamos un elemento DIV cuya altura es la de la altura del área de cliente de la pantalla. El ancho es 1px. El elemento se da el relleno cero, cero frontera y el margen de cero. También se le da un valor de z-index CSS de 2. De este modo, aparece en frente del cuerpo, que tiene un valor de z-index inferior. Lo administra un evento onmouseover, lo que provoca el desplazamiento del elemento DIV interior. Altura de los bordes de la altura del elemento DIV para el borde izquierdo se le da el valor CSS del 100%. De esta manera, el borde izquierdo lleva la altura del área de cliente.
Desplazamiento del elemento de borde izquierdo del cuerpo tiene cero relleno y el margen cero. La declaración CSS correspondiente para esto es: body {background-color: # ff9933; padding: 0px; margen: 0px} El elemento de borde mímica es: Francia El color de fondo es la del elemento BODY. Hay un atributo onmouseover. Cuando el ratón está sobre el borde imitan la función, doShiftRight () será llamado. Las funciones veremos a partir de ahora en adelante se modifican las versiones de lo que vimos en la parte anterior de la serie. doShiftRight () es uno de ellos; veremos los detalles más adelante.
La función, doShiftRight () cambiará el elemento DIV interior a la derecha. El guión ya no estará en el elemento BODY, será en el elemento HEAD. Puede borrar toda la secuencia de comandos que tiene en el elemento BODY en el capítulo anterior. El elemento DIV exterior no debe tener un borde. Borre la siguiente propiedad de la declaración CSS del elemento DIV exterior. frontera: 2px azul sólido; Reemplazar lo que ha borrado con: border-width: 0px; Los dos elementos DIV (interior y exterior) son los siguientes elementos al borde mímica (DIV 1px).
Asegúrese de que las propiedades en cualquier declaración CSS están separados por punto y coma. Función básica de desplazamiento de la izquierda Cuando el puntero del ratón pasa sobre el borde izquierdo, la función, doShiftRight () se llama. La función tiene dos variables asociadas. Esta es la función con las variables: var x; //coordenada x TR var; //valor de retorno para la función setInterval () - Función de la derecha se mueve doShiftRight () {x = document.getElementById ('Calc') style.left.; x = parseInt (x); TR = self.
setInterval ("shiftRight ()", 10); } El píxel es el componente más pequeño reconocible en la página web. La página web está llena de píxeles dispuestos en filas y columnas. Toda la imagen que se ve en la pantalla es como resultado de los píxeles que tienen colores diferentes. La variable x de arriba es para una columna de píxeles dentro del elemento DIV exterior. Recuerde que el elemento DIV interior simplemente encaja en el elemento DIV exterior. Así que esta variable se utiliza realmente para cambiar la posición horizontal de la DIV interior.
La siguiente variable, TR es para el ID de retorno para el método setInterval () dentro de la función anterior. La primera línea en la función, las copias CSS dejó valor de la posición del elemento DIV interior a la variable, x. Este valor izquierdo al comienzo es -205px. La siguiente línea se asegura que es un entero. La tercera línea llama a una función llamada, shiftRight () a través de la función setInterval de DOM () cada 10 ms. El shiftRight () Función Esta función desplaza el DIV interior a la derecha y se detiene cuando la posición de la izquierda CSS es mayor que o igual a cero.
Esta es la función: shiftRight function () {document.getElementById ('Calc') style.left = x;. //detener el desplazamiento derecha si (x>