어느 대협이 구글의 그 그림 효과의 원리를 말해 줄 수 있습니까
이것은 매우 간단합니다. 긍정적 인 해결책
에 사용되는 기술: Ajax, div 계층의 개념, JavaScript 의 타사 효과 라이브러리
Di 코드로 설명하면 "lt; Divgt；; 여기에 사진 lt 를 보관하십시오. /div gt; "
썸네일 및 큰 이미지: 이미지를 코드로 표시 크기를 제어할 수 있으므로 작은 이미지와 큰 그림을 볼 수 있습니다
축소판 그림을 클릭하면 먼저 흰색 영역이 표시되고 중간에 로드 대기 패턴이 있습니다. 이 안에는 Ajax 기술이 사용됩니다. Ajax 가 그림 로드가 완료된 정보를 수신하면 브라우저에 그림을 표시할 수 있다고 알려 줍니다.
두 번째 단계, 흰색 영역에 그림이 표시됩니다.
때때로 흰색 영역이 작아지는 이유는 무엇입니까?
제 3 자 js 라이브러리가 다시 사용되기 때문에 그의 역할 전환 효과, 즉 div 계층의 이동이 여기에 사용되었습니다. 그래서 당신은 흰색 영역이 천천히 그림의 가장자리에 접근하는 것을 볼 수 있습니다.
다른 곳을 클릭할 수 없는 게 뭐냐고?
< P > 기술적 관점에서 설명하자면, 당신이 작은 그림을 처음 클릭했을 때, 그가 자동으로 만든 투명한 div 레이어가 그 위에 있기 때문에
< P > 를 주문할 수 없다는 것은 당신이 책상 위에 그림을 놓고 그림 위에 유리판을 놓는 것과 비슷하다는 것입니다.
나는 말했다, 형님, 이해하십니까? 제가 설명하기가 쉽지 않네요.
* * * * * * * * * * * * * * * 네가 말한 것이 옳다는 것을 증명할 어떤 근거가 있니? 코드의 컴파일 원리, 프로그램 실행의 우선 순위, 나는 나의 경험으로 판단할 수 있다. 이것이 어떻게 된 일인지 정말로 알고 싶다면, JavaScript 와 html 기본 문법 지식 (특히 div 의 사용, 그의 style 의 z-index 속성과 filter 속성 설정, 그리고 js 의 기본 문법과 DOM 사양) 을 보고 다시 질문하겠습니다. 이 효과는
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 두 파일은 다음과 같습니다 (응용 프로그램 루트 디렉토리의 경우 웹루트).
이름: flash_ad_relay.swf
디렉토리: 웹루트 Ads_data/
설명: webroot/comic/flasher/ 에 있는 ads.htm 파일 코드를 보면 flash _ 를 확인할 수 있습니다 Imgad.swf 는 광고 (ad) 프로그램으로, 인터넷 역할을 하는 것이 페이지 맨 아래에 있습니다.
일반적으로 flash_ad_relay.swf 는 imgad.swf 파일 로드의 진행 상황을 제어하고 표시하는 데 사용됩니다.
포털 방법: tianchaoyu.html 파일의 lt; Script type = "text/JavaScript" src = "/pagead/show _ ads.js" gt;
lt; /스크립트 gt;
이 코드 행은 flash 광고 프로그램을 로드하는 데 사용됩니다. 이는 구글의 명명 사양과 디렉토리 구조를 따라야 합니다.
위의 것은 제가 개인적으로 추측한 것이지만, 이 곳만 플래시 파일을 사용하고 있습니다. 사진은 전혀 사용되지 않았음을 보여줍니다.
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *.
background-color: # fff;
폭: 250px;
높이: 250px;
마틴: 0 자동;
}
위에는 lightbox.css 코드 단편, width： 250px；; 하이트: 250px; 사진을 처음 클릭했을 때 초기화 크기가 250 픽셀 *250 픽셀인 17 인치 1024*768 해상도를 제어합니다. 로드하는 동안 loading.gif 그림 (/comic/flasher/images/loading.gif) 이 사용되었는데, 이런 이유로 flash 로 해석한 것 같습니다. 이것은 단지 gif 지도일 뿐이다.
그림을 클릭하면 그림 데이터 전송이 완료되면 그림의 폭 높은 속성을 얻을 수 있습니다. 이러한 속성에 따라 div 계층 (LT; Divgt；; Lt; Img /gt；; Lt; /div gt; ) 는 새 그림에 맞게 자동으로 확장되거나 축소됩니다. 이것이 바로 여러분이 보는 전환 효과입니다.
확대 축소 전환 효과를 처리하는 파일은 lightbox.js 이고 effects.js 에도 좌표 변경 사항이 있습니다.
lightbox.js 는 현재 페이지에 그림을 덮는 간단하고 실용적인 스크립트입니다. 빠르게 설치하여 모든 인기 있는 브라우저에서 작동할 수 있습니다. 이 사이트는 2.02 버전을 사용하는데, Lokesh Dhakar 사람이 20060331 일 만든 것으로 관련 정보를 볼 수 있다.
마지막으로 사용 방법을 소개합니다. 특히 easy
* * * * * * * * * * * * * * * * * * * * * * 입니다 Javascript 에 대한 많은 확장과 Ajax 에 대한 지원이 잘 이루어지고 있으며, 해외에는 이 라이브러리를 기반으로 하는 여러 가지 효과 라이브러리가 있으며, 또한 매우 잘 하고 있습니다. (윌리엄 셰익스피어, 자바스크립트, 자바스크립트, 자바스크립트, 자바스크립트, 자바스크립트)
앞서 언급한 lightbox.js 와 뒤에서 말할 effects.js 는 prototype.js 를 기반으로 하며 일반적으로 함께 사용됩니다.
scriptaculous.js 및 effects.js
애니메이션 효과 라이브러리입니다.
scriptaculous 는 다음과 같은 섹션으로 구성됩니다.
builder.js: html 요소를 쉽게 작성할 수 있는 방법을 제공합니다
control
effects.js: 이 문장
slider.js: 슬라이드 컨트롤
effects 복합 효과 (combination effect)
* * * * * * * * * * * * * * * * * * * * * * * * 라고 합니다
Lightbox v2.0 은 Prototype 프레임워크와 Scriptaculous 효과 라이브러리를 사용합니다. header.
에서 이 세 가지 Javascript 파일을 외래해야 합니다.
코드:
lt; Script type = "text/JavaScript" src = "js/scriptaculous.js? 로드 = effects "gt; Lt; /스크립트 gt;
lt; Script type = "text/JavaScript" src = "js/lightbox.js" gt; Lt; /스크립트 gt;
2 단계
Lightbox CSS 파일 외래식 (또는 현재 스타일 시트에 Lightbox 스타일 추가) ..
lt; Link rel = "stylesheet" href = "CSS/lightbox.css" type = "text/CSS" media = "screen"/
3 단계
CSS 를 검사하고 호출된 prev.gif 및 next.gif 파일이 올바른 위치에 있는지 확인합니다. 호출되는 loading.gif 및 close.gif 파일과 A href = "images/image-1.jpg" rel = "lightbox" title = "mycaption" gt; 이미지 # 1lt; /AGT;
방법 2: 그룹화하려는 관련 사진 세트가 있는 경우, 이전 작품과 rel 속성에 대괄호로 묶인 그룹 이름을 추가합니다 (예:
lt; A href = "images/image-1.jpg" rel = "light box [road trip]" gt; 이미지 # 1lt; /AGT;
lt; A href = "images/image-2.jpg" rel = "light box [road trip]" gt; 이미지 # 2lt; /AGT;
lt; A href = "이미지/I
Mage-3.jpg "rel =" lightbox [roadtrip] "gt; 이미지 # 3lt; /AGT;
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *. 자세한 코드가 필요하면 데모
라이트 박스 다운로드 주소:/articleimg/2006/08/3904/라이트 박스 2.02.zip <