jq view Vorschaubild-Beispielfreigabe-js-Tutorial-php.cn

jq view Vorschaubild-Beispielfreigabe

小云云

Freigeben： 2018-03-17 10:58:40

Original

1298 Leute haben es durchsucht

Wenn Sie die Maus über das Miniaturbild bewegen, wird das große Bild des Bildes angezeigt, und das große Bild folgt der Mausbewegung oder bewegen Sie die Maus über den Eingabeaufforderungstext, um das Bild anzuzeigen. Es enthält auch eine Richtungsunterscheidungsfunktion. Wenn sich das Miniaturbild in der linken Hälfte der Seite befindet, wird das große Bild auf der rechten Seite der Maus angezeigt Das große Bild wird auf der linken Seite der Maus angezeigt.

Ideenanalyse

HTML-Struktur

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

Nach dem Login kopieren

Rufen Sie die Vorschaubildadresse ab, wenn die Maus <a></a>< bedeckt 🎜>Vorschaustruktur

<p id=&#39;preview&#39;><p>
<img src=&#39;"+$(this).attr(&#39;href&#39;)+"&#39; />
<p>"+$(this).attr(&#39;title&#39;)+"</p></p></p>

Nach dem Login kopieren

Zum Text hinzufügen, absolute Positionierung verwenden

- Plug-in-Entwicklung
Da ich das Plug-in-Entwicklungsmodell ausprobieren wollte, habe ich Folgendes geschrieben:

    $.fn.preview=function(){
        ......
    }

Nach dem Login kopieren

jQuery.fn = jQuery.prototype

Jedes JQ-Objekt kann verwendet werden

Quellcode

<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>

Nach dem Login kopieren

jquery-imgpreview.js

Das obige ist der detaillierte Inhalt vonjq view Vorschaubild-Beispielfreigabe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!