suchen

Heim >Web-Frontend >js-Tutorial >jq view Vorschaubild-Beispielfreigabe

jq view Vorschaubild-Beispielfreigabe

小云云
小云云Original
2018-03-17 10:58:401352Durchsuche


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>

Rufen Sie die Vorschaubildadresse ab, wenn die Maus 3499910bf9dac5ae3c52d5ede73834855db79b134e9f6b82c0b36e0489ee08edVorschaustruktur

<p id=&#39;preview&#39;><p>
<img src=&#39;"+$(this).attr(&#39;href&#39;)+"&#39; />
<p>"+$(this).attr(&#39;title&#39;)+"</p></p></p>
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(){
        ......
    }
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>
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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So verwenden Sie das React BootStrap-FrameworkNächster Artikel：So verwenden Sie das React BootStrap-Framework

In Verbindung stehende Artikel

Mehr sehen