Cliente Magia HTML Edges - Parte 2 Introdução Esta é a segunda parte de minha série, Edges cliente Magia HTML. Aqui, vemos como implementar as Edges cliente Magia HTML. Nesta parte, vamos considerar o caso, em que a calculadora (elemento DIV interior) sai da borda esquerda da página e volta quando necessário. Natureza do mímico Margem Esquerda Precisamos colocar uma borda imitador apenas ao lado da borda esquerda. Nossa vantagem mímica é um elemento DIV. Então nós criamos um elemento DIV cuja altura é o da altura da área de cliente da tela. A largura é 1px.
O elemento é dado zeros, beira zero e margem zero. Também é dado a ele um valor z-index de CSS 2. Desta forma, ele aparece na frente do corpo, que tem um valor z-index mais baixo. É dado um evento onmouseover, o que desencadeia a rolagem do elemento DIV interior. Altura das bordas A altura do elemento DIV para a borda esquerda é dado o valor de 100% de CSS. Deste modo, a margem esquerda leva a altura da área do cliente. Rolagem do elemento margem esquerda do corpo tem zero de preenchimento e margem zero.
A declaração CSS correspondente para isso é: body {background-color: # FF9933; padding: 0px; margin: 0px} O elemento de bordo mímica é:
A cor de fundo é a do elemento BODY. Há um atributo onmouseover. Quando o mouse está sobre a borda imitar a função, doShiftRight () será chamado. As funções veremos a partir de agora já são versões do que vimos na parte anterior da série modificada. doShiftRight () é um deles; veremos os detalhes mais tarde. A função, doShiftRight () irá mudar o elemento DIV interior para a direita. O script não será mais no elemento BODY, será no elemento HEAD.
Você pode apagar todos os scripts que você tem no elemento BODY no capítulo anterior. O elemento DIV exterior não deve ter uma borda. Apague a seguinte propriedade a partir da declaração CSS do elemento DIV exterior. border: 2px azul sólida; Substitua o que você apagou com: border-width: 0px; Os dois elementos DIV (interior e exterior) são os próximos elementos para a borda mímico (1px DIV). Certifique-se as propriedades em qualquer declaração CSS são separados por ponto-evírgula.
Função básica para rolagem da esquerda Quando o ponteiro do mouse passa sobre a borda esquerda, a função, doShiftRight () é chamado. A função tem duas variáveis associadas. Esta é a função com as variáveis: var x; //x coordenar var TR; //valor de retorno para setInterval () função - que se deslocam função direita doShiftRight () {x = document.getElementById ('Calc') style.left.; X = parselnt (x); TR = self.setInterval ("shiftRight ()", 10); } O pixel é o menor componente reconhecível na página web. A página web está cheia de pixels dispostos em linhas e colunas.
Toda a imagem que você vê na tela é como resultado dos pixels com cores diferentes. A variável, x é de cima para uma coluna de pixels no interior do elemento exterior DIV. Lembre-se que o elemento DIV interior apenas se encaixa no elemento DIV exterior. Portanto, esta variável é realmente usado para alterar a posição horizontal do DIV interior. A próxima variável, TR é para o ID retorno para o método setInterval () dentro da função acima. A primeira linha na função, cópias CSS deixou valor da posição do elemento DIV interior para a variável, x. Este valor esquerdo no início é -205px.
A próxima linha faz se ele é um inteiro. A terceira linha chama uma função chamada, shiftRight () através da função setInterval do DOM () a cada 10ms. O shiftRight () Esta função desloca a div interna para a direita e pára quando a posição esquerda CSS é maior do que ou igual a zero. Esta é a função: function shiftRight () {document.getElementById ('Calc') style.left = x;. //interromper a rolagem direita if (x>