jq 보기 미리보기 이미지 예시 공유-JS 튜토리얼-php.cn

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

小云云

풀어 주다： 2018-03-17 10:58:40

원래의

1337명이 탐색했습니다.

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

아이디어 분석

html 구조

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

로그인 후 복사

마우스를 덮을 때 미리보기 이미지 주소 가져오기 <a></a>
이미지 구조 미리보기

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!