Heim > Artikel > Web-Frontend > jq view Vorschaubild-Beispielfreigabe
jq view Vorschaubild-Beispielfreigabe
- 小云云Original
- 2018-03-17 10:58:401258Durchsuche
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='preview'><p> <img src='"+$(this).attr('href')+"' /> <p>"+$(this).attr('title')+"</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
<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.jsDas obige ist der detaillierte Inhalt vonjq view Vorschaubild-Beispielfreigabe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!