이미지 전환을 달성하기 위한 jquery 마우스 휠
- php中世界最好的语言원래의
- 2018-04-26 09:58:432418검색
이번에는 이미지 전환을 구현하기 위한 jquery 마우스 휠을 가져왔습니다. jquery 마우스 휠을 사용하여 이미지 전환을 구현하는 데 있어 주의 사항은 무엇입니까? 다음은 실제 사례입니다.
이 예에서 얻은 효과는 다음과 같습니다. 마우스 휠을 스크롤하면 그림이 전환됩니다.
사진 전환 효과를 얻기 위해 키보드 화살표 키를 지원합니다.
사진 전환 클릭과 현재 사진 링크 클릭을 지원합니다.
진행률 표시줄 슬라이더는 사진 수의 진행 상황을 보여줍니다.
XHTML
<p class="demo"> <p id="imageflow"> <p id="loading"><img src="images/loader.gif" alt="loading" /></p> <p id="captions"></p> <p 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" /> </p> <p id="scrollbar"> <p id="slider"></p> </p> </p> </p>
p.demo은 가장 바깥쪽 레이어이며 전체 스크롤 효과에 필요한 모든 요소를 포함합니다. #imageflow는 필수이며, 포함된 요소의 ID 이름은 수정할 수 없습니다. 실제로 수정하려면 JS 코드를 먼저 정의하거나 직접 수정해야 합니다. #loading은 로딩 애니메이션 이미지를 로드하는 데 사용됩니다. 물론 "로딩"이나 기타 텍스트를 직접 작성할 수도 있습니다. #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 }
#loading { margin:0; color:#fff; text-align:center }
#loading 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를 사용합니다. 투명 PNG 이미지는 IE6에서 지원되지 않으므로 관련 처리를 수행해야 합니다. 다음으로 스크롤 진행률 표시줄과 슬라이더의 설정을 살펴보겠습니다. 모두 위치 지정 및 깊이 설정을 사용합니다. 왜 이렇게 설정되어 있는지 천천히 테스트해 봐야 알 수 있습니다.
jquery 라이브러리 및 js 파일 슬라이딩 소개
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/imageflow.js"></script>
모든 js 작업은 imageflow.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 코드가 전혀 필요하지 않다는 것을 알게 될 것입니다.
이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:
위 내용은 이미지 전환을 달성하기 위한 jquery 마우스 휠의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!