Те, кто использовал ArcGIS, должны иметь глубокую память о эффекте роликового затвора в ArcMap. Они хотят переместить его в свою систему Webgis. С той же идеей я также провел некоторые исследования этого ослепительного эффекта затвора ролика. Это выходит и сообщит о результатах всем.
Видя этот эффект, вы переместили цыпочку? Хе -хе, не волнуйся, послушай меня медленно.
Сначала контейнер. Два DOV используются для отображения изображений из двух разных периодов. Затем установите стиль двух контейнеров, код:
#before {position: Absolute; Верх: 0px; слева: 0px; фоновая image: url (../ Images/24.jpg); Ширина: 940px; Высота: 529px; Восновная переписка: без повторения; } #before {position: Absolute; Верх: 0px; слева: 0px; граница правая: 3PX Solid #F00; Фоно-изображение: URL (../ Images/23.jpg); Ширина: 433px; Высота: 529px; Восновная переписка: без повторения; максимальная ширина: 940px; }Таким образом, изображение будет отображаться в Интернете.
Далее, достичь эффекта роликового затвора. Для реализации роликового затвора, самое главное, чтобы установить ширину ранее. Как это установить? Это должно получить положение мыши. Код заключается в следующем:
функция Rollimage (evt) {var x = evt.pagex; console.log (x); $ ("#перед"). CSS ("ширина", x+"px"); } /script>Таким образом, эффект роликового затвора реализуется. Исходный код заключается в следующем:
Style.css
.beforefer {ширина: 940px; Высота: 529px; } #after {position: Absolute; Верх: 0px; слева: 0px; фоновая image: url (../ Images/24.jpg); Ширина: 940px; Высота: 529px; Восновная переписка: без повторения; } #before {position: Absolute; Верх: 0px; слева: 0px; граница правая: 3PX Solid #F00; Фоно-изображение: URL (../ Images/23.jpg); Ширина: 433px; Высота: 529px; Восновная переписка: без повторения; максимальная ширина: 940px; }test.html
<html lang = "zh-cn" xmlns = "http://www.w3.org/1999/xhtml"> <Head> <Teal> Сравнение до и после землетрясений в Японии </title> <meta http-equiv = "metepe". http-equiv="Content-Language" content="zh-CN"> <link href="css/roll.css" type="text/css" rel="stylesheet"> <script src="../jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> функция Rollimage (evt) {<strong> var x = evt.pagex; $ ("#перед"). CSS ("ширина", x+"px"); </strong>} </script> </head> <body> <div onmouseMove = "rollimage (event)"> <div id = "после"> </div> <div id = "перед"> </div> </body> </html> </div> <div = "