Ceux qui ont utilisé ArcGIS doivent avoir une mémoire profonde de l'effet d'un volet à rouleau dans ArcMap. Ils veulent le déplacer vers leur système Webgis. Avec la même idée, j'ai également fait des recherches sur cet effet d'obturateur à roller éblouissant. Il est sorti et rapporte les résultats à tout le monde.
Voir cet effet, avez-vous déplacé le poussin? Hehe, ne t'inquiète pas, écoute-moi lentement.
Tout d'abord, conteneur. Deux div sont utilisés pour afficher des images à partir de deux périodes différentes. Ensuite, définissez le style des deux conteneurs, code:
#Before {position: absolue; En haut: 0px; gauche: 0px; Image d'arrière-plan: URL (../ images / 24.jpg); Largeur: 940px; Hauteur: 529px; République de fond: sans répétition; } #before {position: absolue; En haut: 0px; gauche: 0px; Border-droite: 3px solide # f00; Image d'arrière-plan: URL (../ images / 23.jpg); Largeur: 433px; Hauteur: 529px; République de fond: sans répétition; largeur maximale: 940px; }De cette façon, l'image sera affichée sur le Web.
Ensuite, réalisez l'effet d'obturation à rouleaux. Pour mettre en œuvre l'obturateur à rouleaux, la chose la plus importante est de définir la largeur d'avant. Comment le définir? C'est pour obtenir la position de la souris. Le code est le suivant:
fonction rollimage (evt) {var x = evt.pagex; console.log (x); $ ("# avant"). CSS ("largeur", x + "px"); } / script>De cette façon, l'effet de l'obturateur à rouleaux est réalisé. Le code source est le suivant:
style.css
.BeForefter {largeur: 940px; Hauteur: 529px; } #after {position: absolue; En haut: 0px; gauche: 0px; Image d'arrière-plan: URL (../ images / 24.jpg); Largeur: 940px; Hauteur: 529px; République de fond: sans répétition; } #before {position: absolue; En haut: 0px; gauche: 0px; Border-droite: 3px solide # f00; Image d'arrière-plan: URL (../ images / 23.jpg); Largeur: 433px; Hauteur: 529px; République de fond: sans répétition; largeur maximale: 940px; }test.html
<html lang = "zh-cn" xmlns = "http://www.w3.org/1999/xhtml"> <éadfri http-equiv = "content-liage" content = "zh-cn"> <link href = "css / roll.css" type = "text / css" rel = "Stylesheet"> <script src = "../ jQuery-1.8.3.js" type = "text / javascrip"> "utf-8"> </script> Rollimage (evt) {<strong> var x = evt.pagex; $ ("# avant"). CSS ("largeur", x + "px"); </strong>} </cript> </ad> <body> <div onMousemove = "rollimage (event)"> <div id = "After"> </div> <div id = "avant"> </div> </body> </html>