jquery_jquery를 기반으로 마우스 휠 구동 그림 전환 효과 구현-JS 튜토리얼-php.cn

jquery_jquery를 기반으로 마우스 휠 구동 그림 전환 효과 구현

WBOY

풀어 주다： 2016-05-16 15:34:48

원래의

1391명이 탐색했습니다.

이 예에서 얻은 효과:
마우스 휠을 스크롤하면 그림이 전환됩니다. 이미지 전환 효과를 달성하기 위해 키보드 화살표 키를 지원합니다.
클릭하여 사진을 전환하고 현재 사진 링크를 클릭하는 것을 지원합니다.
진행률 표시줄 슬라이더는 사진 수의 진행률을 보여줍니다.

XHTML

<div class="demo"> 
 <div id="imageflow"> 
 <div id="jquery_jquery를 기반으로 마우스 휠 구동 그림 전환 효과 구현"><img src="images/loader.gif" alt="jquery_jquery를 기반으로 마우스 휠 구동 그림 전환 효과 구현" /></div> 
 <div id="captions"></div> 
 <div id="images"> 
 <img src="images/s1.jpg" alt="image1" /> 
 <img src="images/s2.jpg" alt="image2" /> 
 <img src="images/s3.jpg" alt="image3" /> 
 <img src="images/s4.jpg" alt="image4" /> 
 </div> 
 <div id="scrollbar"> 
 <div id="slider"></div> 
 </div> 
 </div> 
</div>

로그인 후 복사

div.demo는 가장 바깥쪽 레이어이며 전체 스크롤 효과에 필요한 모든 요소 를 포함합니다. #imageflow는 필수이며, 그 안에 포함된 요소의 ID 이름은 수정할 수 없습니다. 실제로 수정하려면 먼저 JS 코드 를 정의하거나 직접 수정해야 합니다. #jquery_jquery를 기반으로 마우스 휠 구동 그림 전환 효과 구현은 로딩 애니메이션 이미지를 로드하는 데 사용됩니다. 물론 "jquery_jquery를 기반으로 마우스 휠 구동 그림 전환 효과 구현"이나 기타 텍스트를 직접 작성할 수도 있습니다. #captions는 이미지 캡션을 표시하는 데 사용됩니다. #images스크롤하고 싶은 이미지를 배치하고 개수에는 제한이 없습니다. #scrollbar는 사진을 표시하는 진행률 표시줄입니다. #slider는 사진 전환 시 슬라이더가 해당 위치로 슬라이드되어 사진 수를 표시합니다.
CSS

.demo { width:860px; height:300px; margin:20px auto; position:relative; background:#e8f5fe; overflow:hidden } 
#images { margin:20px 0 0 60px; width:860px } 
#images img { position:absolute; margin-top:-160px } 
#jquery_jquery를 기반으로 마우스 휠 구동 그림 전환 효과 구현 { margin:0; color:#fff; text-align:center } 
#jquery_jquery를 기반으로 마우스 휠 구동 그림 전환 효과 구현 img { position:ralative; margin:0 } 
#captions { position:relative; height:24px; line-height:24px; top:100px; left:320px; background:url(images/cap_bg.png) no-repeat center center; color:#fff; font-weight:bold; text-align:center; z-index:10000 } 
#scrollbar { position:relative; top:-100px; height:2px; z-index:10001 background:#abcd3a url(images/scroll.gif) repeat-x; 
} 
#slider { position:absolute; width:15px; height:4px; margin:-1px 0 0 -1px; background:url(images/bar.gif) no-repeat; z-index:10002 }

로그인 후 복사

CSS는 전체적인 효과를 얻기 위한 핵심 부분입니다. CSS를 잘 제어하지 않으면 원하는 효과를 얻을 수 없습니다.
.demo는 마우스 휠 스크롤 범위를 .demo로 제한하기 위해 너비와 높이를 설정하고 위치:상대적 및 오버플로:숨김을 설정합니다. #images는 여백 값을 설정하고 내부 이미지의 상대적 위치를 설정합니다. #captions는 그림 제목을 표시하는 데 사용되는 스타일을 설정합니다. 배경 그림으로 반투명 그림 cap_bg.png을 사용합니다. IE6에서는 투명 PNG 그림이 지원되지 않습니다. 관련 처리가 필요합니다. 다음으로 스크롤 진행률 표시줄과 슬라이더의 설정을 살펴보겠습니다. 모두 위치 지정 및 깊이 설정을 사용합니다. 왜 이렇게 설정되어 있는지 천천히 테스트해 봐야 알 수 있습니다. jquery 라이브러리와 슬라이딩 js 파일 소개

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/imageflow.js"></script>

로그인 후 복사

imageflow.js에서 모든 js 작업이 완료되었으며 약간만 변경하면 누구나 직접 사용할 수 있습니다.

이제 효과를 볼 수 있습니다. 하지만 여전히 문제가 있습니다.

사진 링크 주소는 어떻게 얻나요? 최종 효과는 현재 표시된 이미지를 클릭하면 해당 이미지와 관련된 상세 정보를 표시하는 페이지로 연결되는 것입니다. 그렇다면 이 링크 주소를 얻는 방법은 252번째 줄부터 시작하는 두 줄의 코드입니다:

image.url = image.getAttribute("longdesc"); 
image.ondblclick = function() { document.location = this.url; }

로그인 후 복사

사진의 링크 주소는 해당 속성인 longdesc에서 오는 것을 볼 수 있습니다. 사진을 클릭하면 해당 페이지로 이동합니다. 자, 이제 우리가 시작한 XHTML 코드로 돌아왔으니, 각 이미지에 longdesc 속성을 할당하고 해당 웹 페이지 주소에 값을 설정하기만 하면 됩니다. 예:

<img src="images/s1.jpg" alt="image1" longdesc="#" />

로그인 후 복사

이제 작업이 완료되었습니다. 이 예제를 읽고 나면 imageflow가 이미 모든 작업 코드를 완료했기 때문에 jquery 코드가 전혀 필요하지 않다는 것을 알게 될 것입니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.