>웹 프론트엔드 >JS 튜토리얼 >jq 보기 미리보기 이미지 예시 공유

jq 보기 미리보기 이미지 예시 공유

小云云
小云云원래의
2018-03-17 10:58:401328검색


썸네일 위로 마우스를 이동하면 이미지의 큰 이미지가 표시되고, 큰 이미지는 마우스 움직임을 따르거나 프롬프트 텍스트 위로 마우스를 이동하여 이미지를 표시합니다. 또한 방향 판별 기능도 포함되어 있습니다. 특히 썸네일이 페이지 왼쪽에 있으면 마우스 오른쪽에 큰 이미지가 표시됩니다. 큰 이미지는 마우스 쇼의 왼쪽에 표시됩니다.

아이디어 분석

  • html 구조

<a href="xx.jpg">缩略图</a>

마우스를 덮을 때 미리보기 이미지 주소 가져오기 3499910bf9dac5ae3c52d5ede73834855db79b134e9f6b82c0b36e0489ee08ed
이미지 구조 미리보기

<p id=&#39;preview&#39;><p>
<img src=&#39;"+$(this).attr(&#39;href&#39;)+"&#39; />
<p>"+$(this).attr(&#39;title&#39;)+"</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으로 문의하세요.