썸네일 위로 마우스를 이동하면 이미지의 큰 이미지가 표시되고, 큰 이미지는 마우스 움직임을 따르거나 프롬프트 텍스트 위로 마우스를 이동하여 이미지를 표시합니다. 또한 방향 판별 기능도 포함되어 있습니다. 특히 썸네일이 페이지 왼쪽에 있으면 마우스 오른쪽에 큰 이미지가 표시됩니다. 큰 이미지는 마우스 쇼의 왼쪽에 표시됩니다.
html 구조
<a href="xx.jpg">缩略图</a>
마우스를 덮을 때 미리보기 이미지 주소 가져오기 3499910bf9dac5ae3c52d5ede73834855db79b134e9f6b82c0b36e0489ee08ed
이미지 구조 미리보기
<p id='preview'><p> <img src='"+$(this).attr('href')+"' /> <p>"+$(this).attr('title')+"</p></p></p>
본문에 추가하고 절대 위치 지정 사용
- 플러그인 개발
플러그인 개발 모델을 해보고 싶어서
$.fn.preview=function(){ ...... }
jQuery.fn = jQuery.prototype으로 작성했습니다. 프로토타입의 경우
모든 jq 객체를 사용할 수 있습니다
<style>.imgbox{ margin-top: 150px; text-align: center;}.imgbox img { display: inline-block; width: 250px; height: 144px;}</style><script> $(function(){ $("a.preview").preview(); //页面加载完后执行 });</script><body> <p class="page"> <p class="imgbox"> <a class="preview" href="./img/cool_couple_dark.jpg" title="cool cuple"><img src="./img/cool_couple_dark.jpg" alt="cool couple"></a> <a class="preview" href="./img/cool_couple_dark.jpg" title="cool cuple"><img src="./img/cool_couple_dark.jpg" alt="cool couple"></a> <a class="preview" href="./img/cool_couple_dark.jpg" title="cool cuple"><img src="./img/cool_couple_dark.jpg" alt="cool couple"></a> <a class="preview" href="./img/cool_couple_dark.jpg" title="cool cuple"><img src="./img/cool_couple_dark.jpg" alt="cool couple"></a> <a class="preview" href="./img/cool_couple_dark.jpg" title="cool cuple">查看</a> </p> </p></body>
jquery-imgpreview.js
으아악위 내용은 jq 보기 미리보기 이미지 예시 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!