jq 보기 미리보기 이미지 예시 공유
- 小云云원래의
- 2018-03-17 10:58:401309검색
썸네일 위로 마우스를 이동하면 이미지의 큰 이미지가 표시되고, 큰 이미지는 마우스 움직임을 따르거나 프롬프트 텍스트 위로 마우스를 이동하여 이미지를 표시합니다. 또한 방향 판별 기능도 포함되어 있습니다. 특히 썸네일이 페이지 왼쪽에 있으면 마우스 오른쪽에 큰 이미지가 표시됩니다. 큰 이미지는 마우스 쇼의 왼쪽에 표시됩니다.
아이디어 분석
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.