Cliente Magia HTML Edges - Parte 3 Introdução Nesta parte da série, nós efetivamente realizar um projeto. O projeto trata de uma página web. O objetivo do projeto é que, quando você mover o ponteiro do mouse para a borda da página web, um painel com uma calculadora ou alguma outra ferramenta útil deve rolar para dentro da página; você pode fazer o que quer fazer com a ferramenta; quando você clica no corpo da página, fora do painel, os pergaminhos do painel de volta para a borda. Os fundamentos para o projeto estão nas partes anteriores da série.
Eu fiz um monte de detalhes explicação nas partes anteriores da série. As explicações dadas nesta e na próxima parte da série serão resumidas sempre que possível. A ferramenta para o painel em nosso projeto é uma calculadora. Os detalhes da calculadora não será dada. Na próxima parte da série, vamos olhar para o código completo do projeto. O Projeto Após atravessar o básico estamos agora em posição de avançar com os requisitos técnicos. Agora sabemos o que é possível eo que não é possível medida em que o DOM JavaScript e HTML estão em causa.
Antes de olharmos para os requisitos técnicos, vamos olhar novamente para as necessidades do utilizador de novo: - Quando o ponteiro do mouse atinge uma borda, o painel deve rolar-se na página. A rolagem deve parar logo que a extremidade do painel está na borda. Devido às limitações de recursos HTML DOM e incompatibilidade entre navegadores, teremos apenas a borda esquerda e magia borda superior magia. - Quando o usuário clica no elemento BODY fora do painel, o painel deve rolar de volta para a borda.
Requisitos Técnicos Os requisitos a seguir estão relacionadas com o primeiro requisito do usuário acima: - Haverá uma borda imitador do lado esquerdo da área do cliente. Esta borda mímico será um elemento DIV. - Haverá uma borda mímico na parte superior da área de cliente. Esta borda mímico será um elemento HR; Vou explicar porque mais tarde. - Não haverá nenhuma borda imitador à direita ou na parte inferior da área do cliente. Isto é por causa das limitações mencionadas acima.
- Cada borda mímico irá responder a um evento unmouseover, o que fará com que o painel para se deslocar para dentro da página. - Por causa das limitações mencionadas acima, o painel irá rolar 25% line cliente distante do canto superior esquerdo da área do cliente. - Enquanto o painel de rolagem está na página, nenhuma outra instância do painel pode ser rolada para a página. - Enquanto o painel de rol