Aqueles que usaram o ArcGIS devem ter uma memória profunda do efeito de um obturador de rolos no Arcmap. Eles querem movê -lo para o sistema webgis. Com a mesma idéia, também fiz algumas pesquisas sobre esse efeito deslumbrante do obturador. Está fora e relate os resultados a todos.
Vendo esse efeito, você moveu a garota? Hehe, não se preocupe, me ouça lentamente.
Primeiro, contêiner. Dois divs são usados para exibir imagens de dois períodos diferentes. Em seguida, defina o estilo dos dois contêineres, código:
#também {posição: absoluto; Top: 0px; Esquerda: 0px; Imagem de fundo: URL (../ imagens/24.jpg); Largura: 940px; Altura: 529px; Repetição de fundo: sem repetição; } #também {posição: absoluto; Top: 0px; Esquerda: 0px; Fronteira: 3px Solid #F00; Imagem de fundo: URL (../ imagens/23.jpg); Largura: 433px; Altura: 529px; Repetição de fundo: sem repetição; MAX-LUDA: 940px; }Dessa forma, a imagem será exibida na web.
Em seguida, alcance o efeito do obturador do rolo. Para implementar o obturador, o mais importante é definir a largura de antes. Como defini -lo? É para obter a posição do mouse. O código é o seguinte:
função rollImage (evt) {var x = evt.pagex; console.log (x); $ ("#antes"). CSS ("largura", x+"px"); } /script>Dessa forma, o efeito do obturador é realizado. O código -fonte é o seguinte:
style.css
.BeforeArFter {Width: 940px; Altura: 529px; } #after {Position: Absolute; Top: 0px; Esquerda: 0px; Imagem de fundo: URL (../ imagens/24.jpg); Largura: 940px; Altura: 529px; Repetição de fundo: sem repetição; } #também {posição: absoluto; Top: 0px; Esquerda: 0px; Fronteira: 3px Solid #F00; Imagem de fundo: URL (../ imagens/23.jpg); Largura: 433px; Altura: 529px; Repetição de fundo: sem repetição; MAX-LUDA: 940px; }test.html
<html lang = "zh-cn" xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> Comparação antes e depois das áreas de terremoto-stricken no Japão </title> <meta http-odiV = "conteúdo-stringen htt) </meta http-equiv =" conteúdo-stringen htt) http-equiv = "content-language" content = "zh-cn"> <link href = "css/roll.css" type = "text/css" rel = "sheet sheet"> <script src = ""/ jQuery-1.8.3.js" type = "text/javscript" charset = "utf-" utf-8 " função rollImage (evt) {<strong> var x = evt.pagex; $ ("#antes"). CSS ("largura", x+"px"); </strong>} </sCript> </head> <body> <div onmouseMove = "rollimage (event)"> <div id = "depois"> </div> <div = "antes"> </div> </body> </html>