ArcGI를 사용한 사람들은 ARCMAP에서 롤러 셔터의 효과에 대한 깊은 기억을 가져야합니다. 그들은 그것을 Webgis 시스템으로 옮기고 싶어합니다. 같은 생각으로, 나는이 눈부신 롤러 셔터 효과에 대한 연구를했습니다. 외출하고 결과를 모든 사람에게보고합니다.
이 효과를보고, 당신은 병아리를 움직였습니까? 헤헤, 걱정하지 마세요. 천천히 내 말을 들어라.
먼저, 컨테이너. 두 개의 div는 두 개의 다른 기간의 이미지를 표시하는 데 사용됩니다. 다음으로 두 컨테이너의 스타일을 설정하십시오. 코드 :
#전 {위치 : 절대; 상단 : 0px; 왼쪽 : 0px; 배경 이미지 : URL (../ images/24.jpg); 너비 : 940px; 높이 : 529px; 배경 반복 : 비 반복; } #before {위치 : 절대; 상단 : 0px; 왼쪽 : 0px; 경계 오른쪽 : 3px 솔리드 #F00; 배경 이미지 : URL (../ images/23.jpg); 너비 : 433px; 높이 : 529px; 배경 반복 : 비 반복; 최대 width : 940px; }이런 식으로 이미지가 웹에 표시됩니다.
다음으로 롤러 셔터 효과를 달성하십시오. 롤러 셔터를 구현하려면 가장 중요한 것은 이전의 너비를 설정하는 것입니다. 설정하는 방법? 마우스의 위치를 얻는 것입니다. 코드는 다음과 같습니다.
함수 Rollimage (EVT) {var x = evt.pagex; Console.log (x); $ ( "#~ 이전"). css ( "width", x+"px"); } /script>이러한 방식으로 롤러 셔터의 효과가 실현됩니다. 소스 코드는 다음과 같습니다.
Style.css
. 이후 {너비 : 940px; 높이 : 529px; } #after {위치 : 절대; 상단 : 0px; 왼쪽 : 0px; 배경 이미지 : URL (../ images/24.jpg); 너비 : 940px; 높이 : 529px; 배경 반복 : 비 반복; } #before {위치 : 절대; 상단 : 0px; 왼쪽 : 0px; 경계 오른쪽 : 3px 솔리드 #F00; 배경 이미지 : URL (../ images/23.jpg); 너비 : 433px; 높이 : 529px; 배경 반복 : 비 반복; 최대 width : 940px; }test.html
<html lang = "zh-cn"xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> 일본의 지진이 발생하기 전후에 비교 </title> <meta http-equiv = "content-type"컨텐츠 = "text/html; http-equiv = "content-language"content = "zh-cn"> <link href = "css/roll.css"type = "text/css"rel = "stylesheet"> <script src = "../ jquery-1.8.3.js"text/javascript "charset ="텍스트 "> 함수 Rollimage (EVT) {<strong> var x = evt.pagex; $ ( "#worde"). CSS ( "width", x+"px"); </strong>} </script> </head> <body> <div onmouseMove = "rollimage (event)"> <div id = "</div> <div id ="이전 "> </div> </html>